Equal height inner divs using CSS

Asked Sep 01 '20 at 07:34

Active Sep 01 '20 at 08:33

Viewed 51 times

I have markup as follows

<div>
  <div class="block">
    <div class="title"></div>
    <div class="description"></div>
    <div class="body"></div>
  </div>
  <div class="block">
    <div class="title"></div>
    <div class="description"></div>
    <div class="body"></div>
  </div>
</div>

I am trying to get the title and body divs to have equal heights. So if title of first block is longer then the height of second title should match the height of first title. Same for description. I am using tailwind css and tried using flexboxes and grids and I am not able to get this to work as expected. I see that this can't be done using flex but grids could be an option. Currently I solved this using some jQuery that works. But it would be great if I could do this using CSS. Can someone help me with this please?

Thanks

asked Sep 01 '20 at 07:34

Varshith

1

What's your CSS? – yunzen Sep 01 '20 at 07:52
Please, show your CSS. – AbsoluteBeginner Sep 01 '20 at 07:58
Sorry. I am using tailwind css. So no explicit css (only classes)and the markup is quite complex to put here without context. But basically what I have is markup like I added above. – Varshith Sep 01 '20 at 08:27

Equal height inner divs using CSS

0 Answers0