JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child"><button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button></div>
    <div class="child"><button type="button" class="btn-styleRT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button></div>
    <div class="child"><button type="button" class="btn-styleCT"> middle </button></div>
    <div class="child"><button type="button" class="btn-styleRT"> right </button></div>
</div>

CSS

*{
    box-sizing:content-box;
}
.parent {
    display: table;
    position:relative;
}
.child {
    display: table-cell;
}

.btn-styleLT{
    border : solid 2px #170417;
    border-radius : 20px 0px 0px 0px ;
    moz-border-radius : 0px 20px 0px 0px ;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width: 422px;
    background : #000000;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : linear-gradient(top, #000000 0%, #1f3b08 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleRT{
    border : solid 2px #170417;
    border-radius : 0px 20px 0px 0px ;
    ... <almost same content>
    min-height: 20px;
    max-height: inherit;
    text-overflow: hidden;
 }

 .btn-styleCT{
    border : solid 2px #170417;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width:167px;
    background : #000000;
    ... <almost same content> 
    min-height: 20px;
    max-height: inherit;
 }
.btn-styleCT,.btn-styleRT{
    height: 100%;
}
.btn-styleCT{
    position:relative;
    height:100%;
}
.parent button{
    margin:0px;
}