JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-div">
    <span class="text">text
    </span>
    <span class="button" >button
    </span>
</div>

CSS

.text {
   	color: #000;
	min-width: 0;
    white-space: nowrap;
    display:inline-block;
    overflow: hidden;
    text-overflow:ellipsis;	
	padding: 2px 12px 1px 12px;
	vertical-align: middle;
}

.flex-div {
	float:left;
	vertical-align: middle;
	line-height: 20px;
} 
.button {
	padding-top:2px;
    display:inline-block;
	font-family:Tahoma;
	font-size:8pt;
	color:#1B439F;
	border-bottom: 1px dotted #FF9900;
	cursor:pointer;
	vertical-align: middle;
	white-space:nowrap;
    overflow:visible;
}