title: Create layout HTML with different div with different height
body: <p>I would like to create a layout with divs with different height.</p>
  
  <p>Example image: 
  <a href="https://i.stack.imgur.com/KvsHF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KvsHF.png" alt="enter image description here"></a></p>
  
  <p>I would like even that div can change the height based on the content.</p>
  
  <p>In my code, I put a fixed height for the div so I want to modify it but I don't know how. </p>
  
  <p>This is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="g-block-1"&gt;
          &lt;div class="block1"&gt;&lt;/div&gt; &lt;div class="block2"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="g-block-2"&gt;
          &lt;div class="block3"&gt;&lt;/div&gt; 
          &lt;div class="block4"&gt;&lt;/div&gt;
          &lt;div class="block5"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.block1 {
      width: 100%;
      height: 500px;
      background-color: red;
  }
  
  .block2 {
      width: 100%;
      height: 350px;
      background-color: yellow;
  }
  
  .block3 {
      width: 100%;
      height: 100px;
      background-color: blue;
  }
  
  .block4{
      width: 100%;
      height: 350px;
      color: black;
  }
  
  .block5 {
      width: 100%;
      height: 400px;
      color: pink;
  }
  
  .g-block-1 {
      width: 50%;
      float: left;
  }
  
  .g-block-2 {
      width: 50%;
      float: right;
  }
  </code></pre>