JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="versionBox">
  <div class="versionsHeader">
    versions
  </div>
  
  <div class="versionEntriesContainer">
  
    <div class="versionEntries inline">
    
        <div class="versionEntry">
        
          <div class="versionEntryDetailsContainer inline left-float">
           <div class="versionTextContainer inline right-float">
              <span class="versionText">free</span>
            </div>
          
            <div class="versionTextContainer inline right-float">
              <span class="versionText">V.1.0.0.1</span>
            </div>

           
            
          </div>

          <div class="versionEntryDecorationContainer inline">
            <div class="rightEquilateral"></div>
          </div>
        
        </div>
        
        
        
       
    
    </div>
    
    
    <div class="versionsDecoration inline">
      
      
      <div class="decorationBar centered">
      </div>
     
    </div>
    
  </div>

</div>

CSS

#versionBox
{
  width:300px;

}

.inline
{
  display:inline-block;
}
.versionsHeader
{
  text-align:center;
  padding-top:5px;
  background:blue;
}
.equilateral
{
  border-right:10px solid transparent;
  border-left:10px solid transparent;
  border-bottom:10px solid white;
}

.rightEquilateral
{
  border-left:15px solid white;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
}

.downEquilateral
{
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid white;
}

.decorationBar
{
  width:10px;
  height:120px;
  border:2px solid rgb(240,240,240);
  border-radius:5px;
}

.centered
{
  margin-right:auto;
  margin-left:auto;
}

.versionText
{
  font-size:1.1em;
  color:#616161;
}
.versionTextContainer
{
  padding:5px 8px 5px 5px;
  background:white;
  border:1px solid rgb(230,230,230);
  vertical-align:top;
  box-sizing:border-box;
  width:50%;
  text-align:center;
}

.versionsDecoration
{
  vertical-align:top;
}

.versionEntriesContainer
{
   
    text-align:right;
    width:100%;
    
}

.versionEntries
{
   width:calc(100% - 15px);
   min-height:120px;
   float:left;
   box-sizing:border-box;
   padding-top:10px;
   padding-bottom:10px;
}   

.left-float
{
  float:left;
}

.right-float
{
  float:right;
}

.versionEntry
{
  box-sizing:border-box;
  
}

.versionEntryDetailsContainer
{
  width:calc(100% - 20px);
  text-align:right;
  box-sizing:border-box;
}

.versionEntryDecorationContainer
{
  box-sizing:border-box;
 
  
}