JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="row">
			<div class="col03">
				1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla congue vitae sapien quis eleifend.
			</div><div class="col03">
				2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla congue vitae sapien quis eleifend.
			</div><div class="col03">
				3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla congue vitae sapien quis eleifend.
			</div><div class="col03">
				4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla congue vitae sapien quis eleifend.
			</div>
		</div>
		<div class="row">
			<div class="col03">
				1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla congue vitae sapien quis eleifend.
			</div><div class="col03">
				2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla congue vitae sapien quis eleifend.
			</div><div class="col03">
				3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit eros dolor, ac imperdiet ante volutpat facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et...

CSS

.row {
	width: 100%;
	border-bottom: 1px solid #ccc;
}

.col01, .col02, .col03, .col04, .col05, .col06, .col07, .col08, .col09, .col10, .col11, .col12 {
	display: inline-block;
	padding: 10px;
}

.row, .row > [class*="col"] {
	position: relative;
	box-sizing: border-box;
}

.col01 {
	width: 8.33%;
}

.col02 {
	width: 16.66%
}

.col03 {
	width: 25%;
}

.col04 {
	width: 33.33%
}

.col05 {
	width: 41.66%
}

.col06 {
	width: 50%;
}

.col07 {
	width: 58.33%;
}

.col08 {
	width: 66.66%;
}

.col09 {
	width: 75%;
}

.col10 {
	width: 83.33%;
}

.col11 {
	width: 91.66%;
}

.col12 {
	width: 100%
}




.push01 {
	left: 8.33%;
}

.push02 {
	left: 16.66%
}

.push03 {
	left: 25%;
}

.push04 {
	left: 33.33%
}

.push05 {
	left: 41.66%
}

.push06 {
	left: 50%;
}

.push07 {
	left: 58.33%;
}

.push08 {
	left: 66.66%;
}

.push09 {
	left: 75%;
}

.push10 {
	left: 83.33%;
}

.push11 {
	left: 91.66%;
}

.push12 {
	left: 100%
}





.pull01 {
	left: -8.33%;
}

.pull02 {
	left: -16.66%
}

.pull03 {
	left: -25%;
}

.pull04 {
	left: -33.33%
}

.pull05 {
	left: -41.66%
}

.pull06 {
	left: -50%;
}

.pull07 {
	left: -58.33%;
}

.pull08 {
	left: -66.66%;
}

.pull09 {
	left: -75%;
}

.pull10 {
	left: -83.33%;
}

.pull11 {
	left: -91.66%;
}

.pull12 {
	left: -100%
}

.wrapper {
	width: 800px;
	margin: 50px auto;
}