I currently have three widgets, each containing text of varying lengths. My goal is to ensure that all widgets are the same length, matching the longest text length among them.
Specifically, I want the blue and green widgets to extend in length to accommodate their text content. It's important that none of the content gets cut off or hidden behind the background.
How can I achieve this layout?
.first {width: 24%;float:left; padding:5px; background: blue;}
.second {width: 24%; padding:5px;float:left; background: red;}
.third {width: 24%; padding:5px;float:left; background: green;}<div class="first">This is text.This is text.This is text.This is text.This is text.This is text.</div>
<div class="second">This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.This is text.</div>
<div class="third">This is text.This is text.This is text.This is text.This is text.This is text.</div>