JSFiddle - React, Tailwind, and code Playground

HTML

<div class="infoStrip">
<div class="bfc">
    <div class="r priceText attributeText"><b>2000000</b></div>
    <div class="r acresText attributeText"><b>400 Acres<b> </div>
    <div class="r squareftText attributeText"><b> 30000 ft²</b></div>
    <div class="r roomBathText attributeText"><b>3r 1b<b></div>
    <div class="l listing_title attributeText">SUPER AWESOME BEST TITLE FOREVER AND EVER</div>
</div>


</div>

CSS

.attributeText{
    font-size:16px;
  
    padding-left:12px;

white-space: nowrap;
        
}

.acresText{
  color:#6b3030;
  width: 80px
  
}
.squareftText{
 color:#537bad;
}


.roomBathText{
color:#537bad;
}
.priceText{
color:#1f4a00;
width: 80px
       
}


.bfc {
   display:block;
    padding: 0px 10px 0px 10px;
    margin: 10px 0;

}

.bfc .r {
    float: right;
   
}

.bfc .l {
    overflow: hidden;

}
.infoStrip{

        
height:47px;
width: 709px;    
background-color:#e8e8e8;
overflow-x:hidden; overflow-y:hidden;

}
          
.listing_title{

font-size: 20px;

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}