JSFiddle - React, Tailwind, and code Playground

by Hamed Momeni

HTML

<div class="wrapper">
    <div class="line"></div>
    <div class="text">Text</div>
</div>
<br /><br />
<div class="wrapper">
    <div class="line"></div>
    <div class="text">A really long text to have</div>
</div>

CSS

.wrapper{
    position: relative;
    background:#ccc;
    display:inline-block;
}
.line{
    border-top:1px solid #333;
    width:100%;
    position:absolute;
    top:50%
}
.text{
    margin:5px 15px;
    background:#ccc;
    display:inline-block;
    position:relative;
    z-index:10;
    padding: 0 10px;
}