JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
		<div class="wrap">
			<div class="circle"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>

	<div class="grid">
		<div class="wrap">
			<div class="circle"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</p>
		</div>
	</div>

CSS

body{font-size: 13px;}
		.grid{margin: 0 auto; width: 49%; float: left; border: 5px solid #000; box-sizing: border-box}
		.grid:nth-child(odd){margin-right: 2%;}
		.wrap{max-width: 500px; margin: 5px auto 5px auto; border: 5px solid #000;}
		.circle{border:5px solid red; border-radius: 150px; -ms-border-radius: 150px; -moz-border-radius: 150px; -webkit-border-radius: 150px; -o-border-radius: 150px; width: 200px; height: 200px; margin: 5px auto auto auto;}
		p{text-align: center;}

		@media only screen and (max-width: 768px){
			.grid{float: none; margin-bottom: 10px; width: 100%}
			.grid:nth-child(odd){margin-right: auto;}
			.wrap{max-width: 400px;}
		}