Div is inheriting css height to some extent, then defaults! How to fix?

Question

I have the following table:

Even at the point of the blue arrow are aligned, then when the text is larger on the left side, the right side does not follow the height. how to corrgize?

css:

.content-goal {
  padding: 4px;
}

Shortcode:

Left side,

<div class="col-xs-12 content-goal text-left border-right border-left border-bottom"><?= $conceitos[$i]['sys_id'] ?>. <?= $conceitos[$i]['description'] ?></div>

right-hand side,

<div class="col-xs-3 content-goal text-center border-bottom border-right"><?= $status ?></div>

Complete code of the table:

<div class="col-xs-12 header-goal border-top border-left border-right">OBJETIVOS DE APRENDIZAGEM E DESENVOLVIMENTO</div>

    <?php
      // Cria array de conceitos de acordo com o Type (Pré-escola - maternal)
      $conceitos = $this->db->get_where('learning_goals', array(
        'class_id' => $class_id,
        'section_id' => $section_id,
        'type' => $curType,
      ))->result_array();

      $eixos = [];
      $_subjects = [];

      foreach($conceitos as $conceito) {
        if(in_array($conceito['subject_id'], $_subjects))
          continue;

        array_push($_subjects, $conceito['subject_id']);

        $subject = $this->db->get_where('subject', array(
          'subject_id' => $conceito['subject_id'],
        ))->row();
    ?>

        <div class="col-xs-12" style="padding-left: 0px; padding-right: 0px;">
          <div class="col-xs-12 header-goal border-left border-right border-bottom border-top"><?php echo $subject->name; ?></div>
          <?php

            for($i = 0; $i < sizeof($conceitos); $i++) {
              if(strcmp($conceito['subject_id'], $conceitos[$i]['subject_id']) != 0)
                continue;
          ?>
          <div class="col-xs-12 content-goal text-left border-right border-left border-bottom"><?= $conceitos[$i]['sys_id'] ?>. <?= $conceitos[$i]['description'] ?></div>
          <?php
            }
          ?>
        </div>

    <?php
      }
    ?>
  </div>
  <div class="col-xs-3" style="padding-left: 0px; padding-right: 0px;">
    <div class="col-xs-12 header-goal text-center border-top border-right">BIMESTRE</div>
    <?php
      $lastSubject = '';

      for($j = 0; $j < sizeof($conceitos); $j++) {
        if(strcmp($lastSubject, $conceitos[$j]['subject_id']) != 0) {

        ?>
          <div style="margin-left: -1px" class="col-xs-3 header-goal text-center border-bottom border-top">1º</div>
          <div style="margin-left: 0px" class="col-xs-3 header-goal text-center border-bottom border-top border-left">2º</div>
          <div style="margin-left: 0px" class="col-xs-3 header-goal text-center border-bottom border-top border-left">3º</div>
          <div style="margin-right: 0px" class="col-xs-3 header-goal border-left text-center border-bottom border-top border-right">4º</div>
        <?php
        }

        $lastSubject = $conceitos[$j]['subject_id'];

        for($k = 1; $k <= 4; $k++) {
          $status = $this->db->get_where('learning_goals_status', array(
            'student_id' => $stu->student_id,
            'conceito_id' => $conceitos[$j]['id'],
            'exam_id' => $k,
          ))->row();

          if(!$status)
            $status = '-';
          else
            $status = $status->status;
            ?>
          <div class="col-xs-3 content-goal text-center border-bottom border-right"><?= $status ?></div>
          <?php
        }
      }
    ?>
  </div>

One solution that was useful to me was to define in css the height size with ! Important:

.content-goal {
  padding: 4px;
  height: 40px !important;
}