JSFiddle - React, Tailwind, and code Playground

by adward

HTML

<div class="table">
		<div class="th">
			<p>
				Поле
			</p>
			<p>
				Описание
			</p>
			<p>
				Значение
			</p>			
		</div>
		<div class="tr">
			<p>
				Наименование будет длинным 
			</p>
			<p>
				8х45
			</p>
			<p>
				20 штук
			</p>
		</div>
		<div class="tr">
			<p>
				Наименование
			</p>
			<p>
				8х45
			</p>
			<p>
				20 штук
			</p>
		</div>
	</div>

CSS

.table {
	display: table;
	border-collapse: collapse;
  width: "100%";
}
.th, .tr {display: table-row;}
.th {
	color: #9d9d9d;
	background-color: #f7f7f7;
	min-height: 41px;
}
.th p{
  text-align: center;  
}

p {
	display: table-cell;
	vertical-align: middle;		
	border: 1px solid silver;
  width: "33%";
  padding: 10px;
}
.tr p:nth-child(1){
  text-align: right;
}