title: Dynamic Content: How to adjust div's position automatically?
body: <p>I am setting up a single html page, in which the content changes dynamically based on API calls.Depending on the content length, almost every time a new API call is made, the whole css does not work anymore and divs start to overlap each other. Is there anyway to position the elements dynamically based on the positon of the previous element?</p>
  
  <p>The code's structure is something like this:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="div1"&gt;
          &lt;p class="content"&gt;Dynamic content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="div2"&gt;
          &lt;p class="content"&gt;I am getting overlapped!&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
  width: 70%;
  padding-top: 40px;
  position: relative;
  left: 123px;
  } 
  
  .div1 {
  width: 80%;
  top: 180px;
  position: absolute;
  }
  
  .div2 {
  position: absolute;
  top: 380px;
  width: 70%;
  padding-bottom: 100px;
  }
  </code></pre>
  
  <p>I would be very thankful if someone knows a solution!  </p>