JSFiddle - React, Tailwind, and code Playground

HTML

<div class="QuadroPrincipal">
<div id="QuadroEvento">

    <ul class="ListaDadosEvento">
        <li>
        
                <div class="label">Descrição:</div>
                <div class="dados">@ev</div>
             
        </li>
        <li>
                <div class="label">Local:</div>
                <div class="dados">@ev</div>

        </li>
    </ul>
</div>
</div>

CSS

#QuadroEvento{
    color: white;
}
#QuadroEvento li{
    list-style-type: none;
}
#QuadroEvento div.QuadroDetalhes{
    background-color: #722827;
    -webkit-border-radius: 10px 10px 10px 10px;
       -moz-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);
        border-left: 5px;
        border-right: 5px;
        border-style: solid;    
}
#QuadroEvento ul.ListaDadosEvento {
    width: 95%; 
    background-color: #A9462F;
    -webkit-border-radius: 10px 10px 10px 10px;
       -moz-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);  
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
#QuadroEvento ul.ListaDadosEvento li{
    display: block;
    position: relative;
    background-color: #722827;
    outline: blue solid 1px;
    overflow: hidden;
}
        #QuadroEvento ul.ListaDadosEvento div.label{
            text-align: right;
            font-weight: bold;
            float: left;
            min-width: 100px;outline: black solid 1px;
        }
        #QuadroEvento ul.ListaDadosEvento div.dados{
            padding-left: 5px;
            text-align: justify;
            float:left;
            outline: black solid 1px;
        }