JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col-md-6">
        <section class="panel panel-default">
            <header class="panel-heading"> <span class="panel-title">Resumo atual</span>

            </header>
            <div class="panel-body">
                <div class="health-status">
                    <div class="health-icon">
                        <div id="rating" class="rating-circle sq-orange" data-role="status-name">A</div>
                    </div>
                    <div class="health-description">UTI</div>
                </div>
                <div class="minidash">
                    <section class="row">
                        <div class="card col-md-6">
                            <div class="value">123.456</div>
                            <div class="name">Porte</div>
                        </div>
                        <div class="card col-md-6">
                            <div class="value">-435,0</div>
                            <div class="name">Variação de Curto Prazo</div>
                        </div>
                    </section>
                    <section class="row">
                        <div class="card col-md-6">
                            <div class="value">-123,4</div>
                            <div class="name">Variação de Longo Prazo</div>
                        </div>
                        <div class="card col-md-6">
                            <div class="value">4 meses</div>
                            <div class="name">Tempo em Negativo</div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </div>
    <div class="col-md-6">
        <section class="panel panel-default">
            <header class="panel-heading"> <span class="panel-title">Diagnóstico</span>
 <a class="pull-right" data-remote="true" href="/tickets/262/edit"><span id="edit-icon" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>

            </header>
...

CSS

.minidash section .card {
    text-align: center;
    border-bottom: 1px solid #ecf0f1;
    border-right: 1px solid #ecf0f1;
    padding: 15px 0;
}
.minidash section .card:last-child {
    border-right: none;
}
.minidash section:first-child .card {
    padding-top: 0;
}
.minidash section:last-child .card {
    border-bottom: none;
    padding-bottom: 0;
}
.minidash .value {
    font-weight: bold;
}
.minidash .name {
    color: lightgray;
}
.health-status {
    text-align: center;
    margin: 0 auto;
}
.health-icon {
    display: inline-block
}
.health-description {
    display: inline-block;
    line-height: 70px;
}
.rating-circle {
    height: 70px;
    width: 70px;
    border-radius: 250px;
    font-size: 36px;
    font-weight: 700;
    color: white;
    line-height: 65px;
    text-align: center;
    background: #2c3e50;
    /*float: left;*/
    display: inline-block;
    /*margin-right: 20px;*/
    padding-left: 2px;
    padding-top: 2px;
}