JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row p-0 m-0 m-auto justify-content-center">
  <!-- first container-->
  <div class="col-12 col-sm-6  col-md-6 col-lg-6  col-xl-4 p-0 m-0  text-center p-0  d-flex flex-column" style="border:1px solid red;">
    <div class="d-flex  borde_gris_b m-0">
      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">SNIES</h6>
        <p class="card-text p-0 m-0 "></p>
        <div class="card-text">12967</div>
      </div>
    </div>
    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Duración</h6>
        <p class="card-text p-0 m-0 "> 10 periodos academicos </p>
      </div>
    </div>

    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Número de Créditos</h6>
        <p class="card-text p-0 m-0 "> 170 </p>
      </div>
    </div>
    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Modalidad de Formación</h6>
        <p class="card-text p-0 m-0 "> Presencial </p>
      </div>
    </div>
  </div>

  <!-- two container-->

  <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
    <div id="second" class="row p-0 m-0 h-100">
      <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column">
        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 ">Becas</h6>
            <p class="card-text p-0 m-0 "></p>
            <div class="d-flex mb-1">
              <div class="mr-3"> Beca Bien </div>
              <div>

                <p> $2,107,000 </p>
              </div>
            </div>
          </div>
        </div>
        <div...

CSS

.borde_gris_b {
  border-bottom: 1px solid blue;
}

#second > div > div {
  flex: 1;
}