JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-3col">
	<div class="box-3col-1">
				<img alt="Banana" height="173" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYVRpzJ_BgMuSti8xSqtLjWQoQ3Y4unc7fc5XCsh6jMw3kQchLCnBs3oU" width="173" />
    <p>
        The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p></div>
	<div class="box-3col-2">
		<img alt="Apple" height="173" src="http://dreamatico.com/data_images/apple/apple-6.jpg" width="173" />
    <p>
        The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
    </div>
	<div class="box-3col-3">
		<img alt="Orange" height="173" src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="173" />
    <p>
        The orange tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>			
       </div>
</div>

CSS

.container-3col {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    display: flex; 
    justify-content: center;
}

.container-3col > div {
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.box-3col-1 {
    width: 33.33333%;
}

.box-3col-2 {
    width: 33.33333%;
}

.box-3col-3 {
    width: 33.33333%;
}