title: How to stop one of my divs auto resizing to go to length of my other div
body: <p>I have 2 divs and when I add more text to one and the height increases my other div also automatically increases to be the same height. see images</p>
  <p>any answers are greatly appreciated. thanks in advance</p>
  <p><a href="https://i.stack.imgur.com/AD4qG.png" rel="nofollow noreferrer">first image of two divs</a></p>
  <p><a href="https://i.stack.imgur.com/lrRyp.png" rel="nofollow noreferrer">second image when i add more text the divs go to same height</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.page_contents {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  
  .content {
    width: 70%;
    margin-top: 80px;
    margin-left: 2.5%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    padding-bottom: 21px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 0px 1px rgb(204, 204, 204) inset;
  }
  
  .ad_bar {
    width: 24%;
    margin-top: 80px;
    margin-left: 1%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 1px rgb(204, 204, 204) inset;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page_contents"&gt;
  
    &lt;div class="content"&gt;
      &lt;div class="info"&gt;
        &lt;h1&gt;End Sars Protests&lt;/h1&gt;
        &lt;p class="author"&gt;&lt;i class="fas fa-user"&gt;&lt;/i&gt; Brendan Rhatigan&lt;/p&gt;
        &lt;p class="date"&gt;&lt;i class="fas fa-calendar-alt"&gt;&lt;/i&gt; 14/1/21&lt;/p&gt;
        &lt;p class="share"&gt;&lt;i class="fas fa-share-alt"&gt;&lt;/i&gt; Share&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div class="map"&gt;&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d710218.9176297175!2d6.946767336638483!3d9.206146371825788!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zOcKwMDcnNDEuMiJOIDfCsDI3JzQ0LjciRQ!5e0!3m2!1sen!2suk!4v1610648394834!5m2!1sen!2suk"
          width="580" height="200" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"&gt;&lt;/iframe&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ad_bar"&gt;
      &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt esse sunt tenetur debitis earum natus totam quia eveniet, in officia, mollitia praesentium facere at ullam veritatis, quos sapiente! Quaerat, nobis! Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Excepturi nostrum sapiente error id aut ad ducimus omnis dicta molestias eaque? Quasi, quisquam adipisci consectetur in quibusdam tempore numquam neque reprehenderit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
        maiores delectus eum nemo, quod sint eligendi impedit dolore amet aspernatur ipsum suscipit quidem eaque voluptatibus, temporibus omnis aliquam animi totam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates et in accusamus eveniet
        quas! Culpa exercitationem fuga laborum repellat beatae, quae libero et. Maxime iste, dignissimos rerum ut ipsa aperiam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi facilis possimus voluptatibus inventore perferendis consectetur
        sapiente quisquam totam! Doloribus odio a enim nobis! Accusantium perspiciatis rerum temporibus esse nam? Enim?&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>