JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">Dorothy Bradley</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
  
  <div class="position">
    <span class="ranking-position">1</span>
    <span class="ranking-name">User Name</span>
    <span class="ranking-tier">1rs Team All...</span>
    <span class="ranking-score">1000pts</span>
  </div>
    
</div>

CSS

body {

  font-family: arial;
}

.container{ 
  background-color: white;
  padding-bottom: 15px
  width: 360px;
}

.position {
  clear: both;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
  width: 100%;
}
.ranking-position {
  font-size: 25px;
  float: left;
}

.ranking-tier {
 
}

.ranking-score {
  clear: both;
}

.ranking-name {
  display:block;
}