JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

<ul class="fail">
  <li>I am some text</li>
  <li>I am some more text I am some more text I am some more text</li>
</ul>

CSS

ul {
	display: -webkit-box;   
	display: -moz-box;  
	display: -ms-flexbox;  
	display: -webkit-flex; 
	display: flex;
  list-style: none;
  background: green;
  width: 400px;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}

ul li {
	-webkit-box-flex: 50%;   
	-moz-box-flex: 50%;        
	-webkit-flex: 50%;     
	-ms-flex: 50%;          
	flex: 50%;  
}


ul.fail {
  background: red;
}

ul.fail li {
  height: 100px;
}