JSFiddle - React, Tailwind, and code Playground
HTML
<div class=" container about">
<section class="left">awdwa Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit dolores, quis in molestias. Expedita quod nihil, quia beatae nemo cupiditate!</section>
<section class="right">
<img src="img/nerds-logo-big.png" alt="Nerds logo big" />
<div class="since">
since 2010
</div>
</section>
</div>
CSS
.about {
display: flex;
justify-content: space-between;
margin-top: 55px;
}
.about > .left {
width: 600px;
}
.about > .right {
padding-right: 35px;
text-align: center;
}
.about > img {
width: 187px;
height: 75px;
}
.about .right {
display: flex;
flex-direction: column;
}
.since {
display: inline;
background: orange;
align-self: center;
padding: 0 10px;
position: relative;
z-index: 10;
}
.right::after {
position: relative;
content: "";
border-bottom: 2px solid grey;
display: block;
width: 200%;
top: -10px;
left: -50%;
z-index: 1;
}