1

I want to set the same height of independent div's that have the same class name(i.e 'description', 'features', 'rules') and height should be w.r.t div that have max-content. Note: Content is dynamic and HTML structure must be the same as below.

.products {
  display: inline-flex;
  width: 300px;     
}

.products .product {
  width: 50%;
  border: 1px solid black;
}

.products .product div {
  border-bottom: 1px solid black;
}
<div class="products">
  <div class="product">
    <div class="description">product 1 description description description description description</div>
    <div class="features">product 1 features</div>
    <div class="rules">product 1 rules rules rules rules rules rules rules rules</div>
  </div>
  <div class="product">
    <div class="description">product 2 description</div>
    <div class="features">product 1 features features features features features</div>
    <div class="rules">product 1 rules</div>
  </div>
</div>

Looking for only CSS solution!

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
lovelesh agrawal
  • 29
  • 3
  • Are you trying to keep each sub-block (`.description`, `.features`, `rules`) to be the same height, lined up against each other? If that's the case, you might have better luck with subgrid. Browser support is not perfect yet, though. – chriskirknielsen Apr 13 '20 at 17:55
  • looks like average connection lost my comment about the duplicate and possible grid option : https://jsfiddle.net/b2c3ov6j/ ... so here is again the link to the fiddle(duplicate updated) – G-Cyrillus Apr 13 '20 at 19:51

2 Answers2

2

Consider using grid layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

View the example below with aligned rows using a nested grid layout. 

.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 3px solid blue;
}

.products .product {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  border: 3px solid green;
}

.product .description {
  grid-column: 1;
  grid-row: 1;
  border-bottom: 1px solid yellow;
}

.product .features {
  grid-column: 1;
  grid-row: 2;
  border-bottom: 1px solid red;
}

.product .rules{
  grid-column: 1;
  grid-row: 3;
}
<div class="products">
  <div class="product">
    <div class="description">product 1 description description description description description</div>
    <div class="features">product 1 features</div>
    <div class="rules">product 1 rules rules rules rules rules rules rules rules</div>
  </div>
  <div class="product">
    <div class="description">product 2 description</div>
    <div class="features">product 2 features features features features features</div>
    <div class="rules">product 2 rules</div>
  </div>
</div>

Another good resource if you don't want to nest grids https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas#html

Michael Morahan
  • 31
  • 1
0

For your case, I prefer to use an HTML table:

.products {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  width: 50%;
  border: 1px solid black;
}
<table class="products">
  <tr>
    <td>product 1 description description description description description</td>
    <td>product 2 description</td>
  </tr>
  <tr>
    <td>product 1 features</td>
    <td>product 1 features features features features features</td>
  </tr>
  <tr>
    <td>product 1 rules rules rules rules rules rules rules rules</td>
    <td>product 1 rules</td>
  </tr>
</table>

Maybe it is far from your HTML but possible it could be an answer.

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
  • Hi AmerllicA, Actually my 'product' class looks as a column, table structure will definately works if it behave like row. – lovelesh agrawal Apr 13 '20 at 18:51
  • @loveleshagrawal, I suggest accept one of the answers and then ask a new question with more detail and more specs. – AmerllicA Apr 15 '20 at 14:41