JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexbox">
  <div><span>coucou long</span></div>
  <div><span>coucou</span></div>
  <div><span>bla bla blabla bla blabla bla blabla bla bla</span></div>
</div>

CSS

.flexbox {
    display: flex;
    font-size: 1em;
    text-align: center;
    flex: 1;
    width:200px;
    background:black;
	}
	.flexbox > * + * {
    margin-left:10px;
	}
	/* colors */
   .flexbox > div:nth-child(1){ background : #009246; }
   .flexbox > div:nth-child(2){ background : #F1F2F1; }
   .flexbox > div:nth-child(3){ background : #CE2B37; }
   
   
   /*///////////////////////*/
  
  .flexbox > div {
    display:flex;
    align-items: center;
  }