JSFiddle - React, Tailwind, and code Playground

by Sourabh Singh Rathore

HTML

<section class="flexrow">
	<div class='item'>1asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
    <div class='item'>2</div>
     <div class='item'>3</div>
</section>
<div class="flexrow">
	<div class='item'>1</div>
	<div class='item'>2</div>
     <div class='item'>3</div>
</div>

CSS

.flexrow {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    margin-bottom: 10px;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    -o-flex: none;
}
.item {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    margin: auto 10px;
    border-radius: 5px;
    border:1px solid black;
    text-overflow: ellipsis;
}