JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="container-4col-20-20-40-20">
	<div class="box-4col-1-20">
		&nbsp;</div>
	<div class="box-4col-2-20">
		<img alt="Apple" height="173" src="http://weknowyourdreams.com/images/apple/apple-06.jpg" width="173" /></div>
	<div class="box-4col-3-40">
					<p><strong>Apples</strong><br />
				The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
			<ul>
				<li>
					Gala</li>
				<li>
					Honeycrisp</li>
				<li>
					Pink Lady</li>
			</ul></div>
	<div class="box-4col-4-20">
		&nbsp;</div>
</div>

CSS

.container-4col-20-20-40-20 {
    display: flex;
    justify-content: center;
}

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

    .box-4col-1-20 {
        width: 20%;
    }

    .box-4col-2-20 {
        width: 20%;
    }

    .box-4col-3-40 {
        width: 40%;
    }

    .box-4col-4-20 {
        width: 20%;
    }