JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	
	<section class="section-class">
		
		<div class="container">
			
			<h2>Заголовок секции</h2>

			<div class="row">
				
				<div class="col-md-4">
					
					<div class="items-right">

						<div class="section-class-item">
							<div class="item-text text-right">
								<h3>Классный дизайн</h3>
								<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, алфавит.</p>
							</div>
							<div class="item-icon text-right">
								<span class="icon-wrap"><i class="fa fa-facebook"></i></span>
							</div>
						</div>

						<div class="section-class-item">
							<div class="item-text text-right">
								<h3>Адаптивная верстка</h3>
								<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, алфавит.</p>
							</div>
							<div class="item-icon text-right">
								<span class="icon-wrap"><i class="fa fa-ils"></i></span>
							</div>
						</div>

						<div class="section-class-item">
							<div class="item-text text-right">
								<h3>Валидный HTML5</h3>
								<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, алфавит.</p>
							</div>
							<div class="item-icon text-right">
								<span class="icon-wrap"><i class="fa fa-html5"></i></span>
							</div>
						</div>

					</div>

				</div>
				
				<div class="col-md-4 col-md-push-4">
					
					<div class="items-left">

						<div class="section-class-item">
							<div class="item-icon...

CSS

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.section-class {
  background-color: #f7f7f7;
  padding: 80px 0; }
  .section-class h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 60px; }

.section-class-item {
  margin-bottom: 30px; }
  .section-class-item .icon-wrap {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: tomato;
    display: inline-block;
    border-radius: 10em;
    font-size: 20px;
    color: #fff; }
  .section-class-item h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold; }
  .section-class-item p {
    color: #6f6f6f; }

.items-right .item-icon {
  padding-left: 20px; }

.items-right,
.items-left {
  margin-top: 30px; }

.item-text,
.item-icon {
  display: table-cell;
  vertical-align: top; }

.items-left .item-icon {
  padding-right: 20px; }