JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div class="container">
    <span class="name">heykasdjlakjsdakljdkldadadad</span><!--
    --><span class="text">text xclkvj lxkcjv xl.cmvx.,cvmb x.cvlbm .x,cvmb .x,cmb ;xlcvbmk x;lcvbk ;xlcvbk x;lcvbk </span>
</div>
<div class="container">
    <span class="name">hello</span><!--
    --><span class="text">text xclkvj lxkcjv xl.cmvx.,cvmb x.cvlbm .x,cvmb .x,cmb ;xlcvbmk x;lcvbk ;xlcvbk x;lcvbk </span>
</div>

CSS

.name {
    background:#ccc;
    margin-left:-10px;
    margin-right:5px;
}
.container {
    width:120px;
    margin-left:10px;
    word-break:break-all;
}
.text {
    background:#eee;
}
.name, .text {
    vertical-align:middle;
}