title: Auto adjust div margin Top Dynamically
body: <p>I have a loop of div with different height based on its content. Is there a way to auto adjust margin top of the next div if the one above it has smaller height than the div beside it? My structure is like this.</p>
  
  <p><a href="https://i.stack.imgur.com/oqiS5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oqiS5.png" alt="enter image description here"></a></p>
  
  <p>I have two columns and wanted to adjust the test3 div to remove the space. I tried using flex but still it doesn't work. This is my code</p>
  
  <pre><code>&lt;div style="height:auto;display: flex;flex-wrap: wrap;align-content: flex-start;"&gt;
      &lt;div style="width: 400px; height: auto; background:red;align-self: baseline;"&gt;
          TEST1
      &lt;/div&gt;
      &lt;div style="width: 400px; height: auto; background:red;align-self: baseline;"&gt;
          TEST2&lt;br&gt;
          TEST2
      &lt;/div&gt;
      &lt;div style="width: 400px; height: auto; background:red;align-self: baseline;"&gt;
          TEST3&lt;br&gt;
          TEST3&lt;br&gt;
          TEST3
      &lt;/div&gt;
      &lt;div style="width: 400px; height: auto; background:red;align-self: baseline;"&gt;
          TEST4&lt;br&gt;
          TEST4&lt;br&gt;
          TEST4&lt;br&gt;
          TEST4
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the example, I manually added the div and its content but originally it was created in a loop. Please help me on this. Thank You</p>