Floating divs are giving columns with different height - html

Question

I'm trying to make columns in HTML and css without using grids, flexbox or anything fancy. But the heights of individual columns appear to increase as they go from left to right and it also seems like the contents of the third column is taking up more space.
I've tried setting a specific height to the columns but they don't work as well.
#exhibit {
width: 100%;
height: 600px;
}
.col {
width: 33.3%;
font-size: 1.2em;
float: left;
font-family: sans-serif;
overflow: hidden;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
The three columns should have the same height and occupy equal space.

Answer 1

#exhibit {
height: 600px;
display: table;
width: 100%;
}
.col {
font-size: 1.2em;
font-family: sans-serif;
overflow: hidden;
display: table-cell;
background-color: red;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
You have to used display table type. but you will abled to achieved the .col all at same height