CODEWITHSUNDEEP
htmlcss
Ak. Jain
Ak. Jain

Reputation: 1

How to make two side by side HTML DIVs with same height?

I have two side by side DIVs, one having static content and the other having dynamic content and I want the height of the static DIV increase with an increase in height of the dynamic DIV.

My code so far is:

<div class="row"> 
  <div class="col-sm-2">abc(STATIC CONTENT)</div>
  <div class="col-sm-10"> DYNAMIC CONTENT</div>
</div>

Upvotes: 0

Views: 117

Answers (1)

Robert
Robert

Reputation: 426

.row {
  display: flex;
  width: 500px;
  background: red;
  padding: 20px;
}
.col-sm-2,
.col-sm-10 {
  flex: 1;
  padding: 5px;
}
.col-sm-2 {
  background: lime;
}
.col-sm-10 {
  background: cyan;
}
<div class="row"> 
  <div class="col-sm-2">abc(STATIC CONTENT)<br/> adding more height <br/> ... and some more</div>
  <div class="col-sm-10"> DYNAMIC CONTENT</div>
</div>

To dive deeper into the topic flexboxes see: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Upvotes: 2

Related Questions