title: How to design four column layout using css only when column widths will be variable?
body: <p>I want a four column layout using CSS only where the width of the columns will act responsively. To understand my problem at first please look at below code:</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>.row {
    width: 100%;
    display: table;
  }
  
  .col {
    display: table-cell;
    width: 25%;
  }
  
  .col1 {
    background-color: #89ffa2;
  }
  
  .col2 {
    background-color: #b2f0f9;
  }
  
  .col3 {
    background-color: #ffa7a7;
  }
  
  .col4 {
    background-color: #fff689;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col col1"&gt;
      This is column 1
    &lt;/div&gt;
  
    &lt;div class="col col2"&gt;
      This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
    &lt;/div&gt;
  
    &lt;div class="col col3"&gt;
      This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
    &lt;/div&gt;
  
    &lt;div class="col col4"&gt;
      This is column 4.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the code above, the width is given as 25%, so it will act responsively as equal width for all the columns. But I don't want this 25%. What I want to achieve is, as column 1 and column 4 is pretty smaller in this case, so column 1 and column 4 will be in the size of their content's width. But as all other columns are beyond the 25% size they will take equal width. Also, the height of all 4 columns will be equal to the height of the column having maximum height. And I want this to be responsive, like when screen size will be smaller, then at some points all 4 columns will have to be in same width. And the column 1 and column 4 is dummy in this case. I want it to be dynamic because which column's content will be greater and which one will be smaller that is not known.</p>
  
  <p>I want it to be like this:</p>
  
  <p><img src="https://i.stack.imgur.com/3QTwR.png" alt="enter image description here"></p>
  
  <p>And when the screen will be resized it may then become like this:</p>
  
  <p><img src="https://i.stack.imgur.com/4ouQZ.png" alt="enter image description here"></p>
  
  <p>Is this possible with only CSS? Maybe, I could make myself clear.</p>