JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div class="parent">
  <div class="">X</div>
  <div class="child"><span></span></div>
  <div class="">Y</div>
</div>

CSS

.parent{
  border:1px solid red;
  display: flex;
  flex-direction: row;
}

.child{
  flex: 1;
  background: #f4f;
}

.child span{
  border-bottom:1px solid gray;
  width:100%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top:-2px;
}