JSFiddle - React, Tailwind, and code Playground

by NibblyPig

HTML

<div style="display: flex; flex-grow: 1">

</div>

<div id='divParent'>

<div id='divStars'>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
 <i>STAR</i>
</div>

<div id='divNumbers'>
  <div id='div1'>1</div>
  <div id='div2'>5</div>
  <div id='div3'><span id='spantest'>10</span></div>
</div>
</div>
</div>

CSS

#divParent {
  display: inline-flex;
  flex-direction: column;
  background-color: #ccc;
}

#divStars {
  flex-direction: row;
  background-color: #eee;
}

#divNumbers {
  display: flex;
  flex-direction: row;
  background-color: #aff;
  flex-grow: 1;
}

#div1 {
  align-content: left;
    flex-grow: 1;

}

#div2 {
  align-items: center;
    flex-grow: 1;

}

#div3 {
  align-items: flex-end;
    flex-grow: 1;

}

#spantext {
  
}