JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contact-block">
	<div class="inner-contact-block">
		<div class="address-tel-block">
			<a href="">[email protected]</a><p><b>p</b>+61 (03) 8394 8293</p><p><b>A</b>16 Street Ave, BlazVile, Blaz-andria</p>
		</div>
		<div class="social-block">
			<ul>
				<li><a href="">123</a></li>
				<li><a href="">321</a></li>
			</ul>
		</div>
	</div>
</div>

CSS

.contact-block {
  height: 80px;
}

.contact-block .inner-contact-block {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  height: 80px;
  line-height: 80px;
  max-width: 1180px;
  margin:0 auto;
  overflow: hidden;
  background: #EBEBEB;
}

.inner-contact-block .address-tel-block {
  outline:1px solid red;
  float:left;
  height: 100%;
  width: 50%;
}

.address-tel-block a{
  float:left;
  font:0.65em Arial;
  line-height: 80px;
}
.address-tel-block p{
  position: relative;
  float:left;
  margin-left: 35px;
  color:#8E98A2;
  font:0.65em Arial;
  line-height: 80px;
}
.address-tel-block p b{
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 7px;
}

.address-tel-block p:before {
  content:'';
  position: absolute;
  top:50%;
  margin-top: -0.8em;
  left:-1.5em;
  width: 1px;
  height: 1.6em;
  background: #CED2D5;
};

.inner-contact-block .social-block {
  float:right;
  height: 100%;
  width: 50%;
  background: red;
  outline:1px solid green;
}

.inner-contact-block ul{
  list-style:none;
}