JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <p class ="collapse">data1 <span class ="DataRightAlign"> small </span ></p>
  <p class ="collapse">data2 <span  class ="DataRightAlign"> small</span></p>
  <p class ="collapse">data3 <span  class ="DataRightAlign"> big word here</span></p> 

</div >

CSS

.container{
  width: 110px;
  border-style: ridge;  
}

.collapse {
  display: flex !important;
  align-items: flex-end !important;
}

.collapse:after {
  content: '' !important;
  flex: auto !important;
  min-width: 24px !important;
  margin: 0 6px !important;
  height: 2px !important;
  color: lightgrey !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  background-image: linear-gradient(to right,currentColor 2px,transparent 1px) !important;
  background-size: 4px 2px !important; 
}

.DataRightAlign {
  flex: none;
}

.DataRightAlign:last-child {
  order: 1;
  text-align: right;
}