JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="item item1"><div class="content"><p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p></div></div>
    <div class="item item2"><div class="content"><p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p></div></div>
    <div class="item item3"><div class="content"><p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p></div></div>    
</div>

CSS

.container{
    width: 60%;
    background-color: darksalmon;    
    padding: 5%;   
    
}

.container:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


.item{
    float: left;
    background-color: gold;
    width: 31%;
    border-right: 2px solid brown;
    
    height: 0;
    position: relative;
    padding-bottom: 33%;
}

.item .content{
    height: 100%;
    width: 100%;
}