JSFiddle - React, Tailwind, and code Playground

by Neelansh Verma

HTML

<div class="table">
<div class="item cell">
  Some Text
</div>
</div>
<div class="item">
  Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text
</div>

<div class="item flex">
  Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text
</div>

CSS

.item {
  width: 245px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid grey;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  margin-top: 20px;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table{
		display:table;
		table-layout:fixed;
	}
	.table .cell{
		display:table-cell;
		vertical-align:middle;	
	}