Как разместить абзац справа от блока изображений?

.row{
  display:flex;
  padding: 2rem;
}

::-webkit-scrollbar {
    display: none;
}

.Images_section{
  width:50vw;
  height:100vh;
  overflow-y: scroll;
}


.para_section{
  width:50vw;
  overflow-y: scroll;
  line-height:5rem;
  height:100vh;
  background-color: blue;
}

<div class = "row">
  <div class = "Images_section">
    <img src = "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt = "Img">
     <img src = "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt = "Img">
     <img src = "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt = "Img">
     <img src = "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt = "Img">
  </div>
  
  <div class = "para_section">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde esse mollitia officiis ex tempore quam deserunt porro aut praesentium reprehenderit. Maiores nulla ea qui animi harum dignissimos doloremque corporis, non modi. Omnis facere reprehenderit assumenda ad illo labore corporis eos suscipit debitis veritatis, itaque laudantium nulla dolorem expedita. Et, eius.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure natus quo ducimus consequatur veniam laborum alias incidunt vero dolorum numquam facere voluptatem assumenda, dolore distinctio maxime nisi eaque reiciendis accusantium sint? A veniam pariatur earum eum eius adipisci harum quia sapiente esse, deleniti accusantium! Natus est esse architecto quasi? Temporibus.
  </div>
</div>

/* a simple CSS reset, to ensure that all elements have the
   same box-sizing, margin, padding and font: */

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 18px / 30px sans-serif;
  margin: 0;
  padding: 0;
}


/* here we use display: grid to create two equal-width
   columns (each of which is 1fr, which is one fraction
   of the space available to the grid): */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* using logical properties to assign the margin;
     margin-block is the block-axis of the document
     (top-to-bottom in English/left-to-right languages);
     margin-inline is the inline-axis (the axis in which
     writing flows, so left-to-right in English): */
  margin-block: 1em;
  margin-inline: auto;
  /* an arbitrary width, adjust to taste: */
  width: 90vw;
}

.column {
  /* here we use display: flex: */
  display: flex;
  /* our flex-flow is set to column, so that the images
     appear one-above-the-other, top-to-bottom: */
  flex-flow: column;
  /* we set a 20px gap between adjacent elements: */
  gap: 20px;
  /* contents are placed horizontally and vertically in
     the center of the element; place-content is a short-hand
     for 'align-content' and 'justify-content' (applying the
     same value - 'center' - to each): */
  place-content: center;
}

div.para {
  /* to ensure position is calculated against this parent element,
     rather than any other ancestor: */
  position: relative;
}

p.para {
  color: rgba(47, 46, 46, 0.70);
  margin-block: 0;
  margin-inline: auto;
  text-align: center;
  width: 90%;
  /* to ensure the p.para element(s) are positioned on-screen as the
     document is scrolled: */
  position: sticky;
  /* defining the vertical-position, in relation to the 'top' border
     of the element: */
  top: 1em;
}

<div class = "row">
  <div class = "column">
    <img id = "img1" src = "architecture/img1.jpg">
    <img id = "img2" src = "architecture/img2.jpg">
    <img id = "img3" src = "architecture/img3.jpg">
    <img id = "img4" src = "architecture/img4.jpg">
  </div>
  <div class = "para">
    <p class = "para"> text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text tetx</p>
  </div>

.row{
  display:flex;
  height:100vh;
}
.column img {
  display: block;
  padding: 20px;
  width: 80%;
  height: auto;
}

.column {
  height:100vh;
  overflow-y: scroll;
  margin-left: 70px;
  display: inline-block;
  margin-bottom: 40px;
  width: 60%;
}

.para {
  display: inline-block;
  width: 55%;
  font-size: 18px;
  color: rgba(47, 46, 46, 0.70); 
  letter-spacing: 3px;
  line-height: 60px;
  text-align: center;
  
}

<div class = "row">
  <div class = "column">
    <img id = "img1" src = "https://picsum.photos/200">
    <img id = "img2" src = "https://picsum.photos/200">
    <img id = "img3" src = "https://picsum.photos/200">
    <img id = "img4" src = "https://picsum.photos/200">
  </div>
  <div class = "para">
    <p class = "para"> text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text  text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text   text text text text text text text text text text text text tetx</p>
  </div>