JSFiddle - React, Tailwind, and code Playground

HTML

<div id="settingsd">
    <div data-n="1" data-i="hellofgd gfd gfdg fg dfg dfg dfg df g df g"><img src="http://placekitten.com/32/32">hey hdsfhg dfhgidfhg dfghdfhgdfhg df hgdfg</div>
        <div data-n="2000" data-i="hellofgd gfd gfdg fg dfg dfg dfg df g df g">hey hdsfhg dfhgidfhg dfghdfhgdfhg df hgdfg</div>
            <div data-i="hellofgd gfd gfdg fg dfg dfg dfg df g df g"><img src="http://placekitten.com/32/32">hey hdsfhg dfhgidfhg dfghdfhgdfhg df hgdfg</div>
</div>

CSS

body{background-color:grey;}
#settingsd>div{
 padding:8px;
 background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACAgMAAADk7160AAAACVBMVEUAAAD/////abS1bRDnAAAAA3RSTlMmJgAFaH2oAAAADElEQVQImWNgYHAAAABEAEHCkkV9AAAAAElFTkSuQmCC);
 background-repeat:repeat-x,no-repeat;
 background-position:bottom left,0 0;
 background-size: 100% 1px,48px auto;
 background-color:hsla(0,0%,80%,1);
 font-family:GillSans-Light,arial;
 font-size:16px;
 line-height:32px;
 color:black;
 white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  clear:both;
    border-radius:24px;
}
#settingsd>div:before{
 content:attr(data-n);
 font-family:DINCondensed-Bold,arial;
 font-size:10px;
 line-height:32px;
 color:white;
 white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:0 0 2px hsla(0,0%,0%,.3);/**/
  margin:0;padding:0;display:block;
  float:left;
  margin-right:8px;
    width:32px;
    background: -webkit-linear-gradient(red, blue);text-align:center;border-radius:16px;
}
#settingsd>div:after{
 content:attr(data-i);
 font-family:Avenir-Light,arial;
 font-size:11px;
 line-height:14px;
 color:grey;
 white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
   /*vertical-align:bottom;*/
   margin:0;padding:0;display:block;
    
}
#settingsd>div[data-i]/*,#settingsd>div[data-i]:before*/{
 line-height:18px;
}
#settingsd>div>img{
 float:left;
 margin-right:8px;
 vertical-align:top;
 height:32px;
 border-radius:4px;
}