JSFiddle - React, Tailwind, and code Playground

HTML

<div class="welcomeArea">
	<div class="welcomeAreaContent">
		<div class="welcomeName">
			TEXT TEXT
			<span class ="circle twittericon"></span>
		</div>
		<div class="verticalLine">
		</div>
	</div>
</div>

CSS

.welcomeArea{
    margin-top: 70px;
    max-height: 98px;
    height: 98px;
    background-color: #293847;

}

.welcomeAreaContent{
        line-height: 98px;
        color: white;
        margin-left: 5%;
    margin-right: 5%;

}
.welcomeAreaContent > span {
    display:inline-block;
}
.welcomeAreaContent .welcomeName{
    font-weight: bold;
    font-size: 1.7em;
		display: flex;
    align-items: center;
}
.verticalLine {
  border-left: thick solid #ff0000;
  content: "";
}


.circle { 
   width: 50px;
   height: 50px;
      border-radius: 50%;
    behavior: url(PIE.htc); 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
   margin-left: 32px;
   display: inline-block;
}
.twittericon{
    background: url('data:image/png;base64,...') no-repeat center;
    background-color: white;
     background-size: cover;   

}