JSFiddle - React, Tailwind, and code Playground

HTML

<div class='menu-side'>
  <div>
    <div class='name'>
      Name
    </div>
    <div class='item'>
      Item
    </div>
  </div>
</div>

CSS

.menu-side {
	width: 100%;
}

.menu-side div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.menu-side .name {
	display: inline-block;
	padding: 0.5em;
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
	vertical-align: middle;
  
  width: 85%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;

}

.menu-side .item {
	display: inline-block;
	width: 100%;
	padding: 0.5em;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-top-width: 0;
	vertical-align: middle;
  
  width: 15%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;

}

.name {
}
  
.item {
}