JSFiddle - React, Tailwind, and code Playground

HTML

<section id="contact">
     <div class="wrap_contact">
		<h2>Контакты</h2>
		<h4>Свяжитесь со мной, если вам надо поговорить. Я умею слушать.</h4>
		<div class="null">
			  <div class="col span_2_of_3">
				  <div class="contact-form">
				  	  <form method="post" action="#">
					    <input type="text" name="text" placeholder="Ваше имя">
						 <input type="email" name="email" placeholder="Ваш Email">
						    <div class="clear"> </div>
						     <div>
						    	<textarea name="message" placeholder="Ваше сообщение:"></textarea>
						     </div>
						  <span><input type="submit" name="submit" value="Отправить"></span>
						  <div class="clear"></div>
					    </form>
				  </div>
  				</div>
				<div class="col span_1_of_3">
					<div class="company_address">
				     	<h5>Информация</h5>
						<ul class="list3">
							<li>
								<img src="https://myrusakov.ru/images/articles/html_coding_location.png" alt=""/>
								<div class="extra-wrap">
								  <p>мопс Валли</p>
								  <p>частный дом</p>
								  <p>деревня Valli</p>
								</div>
								<div class="clear"> </div>
							</li>
							
							<li>
								<img src="https://myrusakov.ru/images/articles/html_coding_phone.png" alt=""/>
								<div class="extra-wrap">
									<p>+1 800(тел) 238 2598</p>
								</div>
								<div class="clear"> </div>
							</li>
							<li>
								<img src="https://myrusakov.ru/images/articles/html_coding_fax2.png" alt=""/>
								<div class="extra-wrap">
									<p>+1 500(ксерокс) 6341 8690</p>
								</div>
								<div class="clear"> </div>
							</li>
							<li>
								<img src="https://myrusakov.ru/images/articles/html_coding_mail.png" alt=""/>
								<div class="extra-wrap">
									<p> <a href="mailto:[email protected]"> info(at)valli.com</a></p>
								</div>
								<div class="clear"> </div>
							</li>
						</ul>
				   </div>
				 </div>
				 <div class="clear"></div>
			</div>  
    </div>
     	</section>

CSS

#contact {
	background-color: #ebebeb;
  top: 20%;
}
#contact h2{
	color:#444444;
	font-size:2em;
	padding: 2em 0em 0.7em 0em;
	text-align: center;
}
#contact h4{
	color:#444;
	font-size:1em;
	text-align: center;
}
#contact h5{
	color:#444;
	font-size:1em;
	padding-bottom: 2em;
}
.wrap_contact
{
	width: 87%;
	margin: 0 auto;
}
.null{
   
   }

.col{
	display: block;
	float:left;
	margin: 4% 0 4% 1.6%;
	}
.col:first-child{
	margin-left:0; /* прижатие блока с формой к левому краю */
}	
.span_2_of_3 {
	width: 66.1%; /* ширина блока с формой */
	}
.span_1_of_3 {
	width: 32.2%; /* ширина блока с информацией */
	}
.contact-form{
	padding-bottom:30px;
	}
.contact-form div{
	padding:5px 0 15px;
}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{
	padding: 15px;
	display: block;
	width: 41%;
	background:#fff;
	outline: none;
	color:#888282;
	font-size: 0.8125em;
	-webkit-appearance: none;
	float:left;
	margin-right: 2em;
	font-family: 'Lato', sans-serif;
	font-style: italic;
	border: 2px solid #cacaca;
}
.contact-form input[type="email"]
{
	margin-right: 0em;
}
.contact-form textarea{
	padding: 18px;
	display: block;
	width: 94%;
	height:180px;
	background:#fff;
	outline: none;
	color:#888282;
	font-size: 0.8125em;
	font-style: italic;
	border:2px solid #cacaca;
	margin-bottom: 2em;
	}

.contact-form form input[type="submit"] 
{
	font-family: 'Lato', sans-serif;
	color:#fff;
	padding: 0.8em 1.5em;
	background: #a97b7b;
	border:none;
	display: block;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	cursor: pointer;
	font-size: 1em;
	outline: none;
	text-transform: uppercase;
	float: right;
	margin-right: 2%;	
}
.company_address p {
	color:#525252;
	font-size:0.8125em;
	line-height: 1.8em;
	margin-bottom: 2%;
}
.company_address a{
	color:#525252;
	font-size:1.1em;
	line-height: 1.8em;
	margin-bottom:...