JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<ul class="inner">
			<li>c</li>
			<li>c++</li>
			<li>text</li>
			<li>long long long text</li>
			<li>another text</li>
		</ul>
	</div>
	<div class="wrapper">
		<ul class="inner">
			<li>c++</li>
			<li>text</li>
			<li>another text</li>
			<li>long long long text</li>
			<li>another text</li>
			<li>another text</li>
			<li>another text</li>
			<li>long long long text</li>
			<li>another text</li>
			<li>another text</li>
		</ul>
	</div>

CSS

.wrapper {
		width: 700px;
		height: 200px;
		padding: 0 10px;
		display: table;
		vertical-align: middle;
		background-color: blue;
		margin-bottom: 20px;
	}
	.inner {
		display: table-cell;
		vertical-align: middle;
	}
	li {
		float: left;
		color: #000;
		margin: 2px;
		padding: 5px;
		display: inline-block;	
		list-style-type: none;
		background: #fff;
		border-radius: 	5px;
	}