JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Eventos">
<div class="Evento">
    <div class="NomeEvento">some event some the best event</div>

    <div class="DataEvento">20/05 a 30/06</div>

</div>

<div class="Evento">
    <div class="NomeEvento">Another event</div>

    <div class="DataEvento">20/05 a 30/06</div>

</div>

<div class="Evento">
    <div class="NomeEvento">Just other event</div>
    <div class="DataEvento">20/05 20/05 a 30/06 ff</div>
</div>

</div>

CSS

div.Eventos{
    display: table;
     border-collapse: separate;
 border-spacing: 5px;
}
div.Evento{
 text-align: left; 
 margin: 5px;    
 display: table-row;

}

div.NomeEvento {
 display: table-cell;
        width: 70%;
        padding: 5px;
        text-align: left;
        font-weight: bolder;
    margin: 20px;
        font-size: 1.5em;
        background-color: #BCBCBC;
        border-radius: 10px 0px 0px 10px;
        -webkit-border-radius: 10px 0px 0px 10px;
        -moz-border-radius: 10px 0px 0px 10px; 
}

div.DataEvento {
 display: table-cell;

    margin: 20px;
    width: 15%;
        min-width:130px;        
        margin-left: 10px;       
        padding: 5px;
        text-align: left;
        background-color: #BCBCBC;
        border-radius: 0px 10px 10px 0px;
        -webkit-border-radius: 0px 10px 10px 0px;
        -moz-border-radius: 0px 10px 10px 0px;
}