Codeigniter 3 CSS messed up If I entry a short description on my site

Question

I have a feature to show about agenda of my office on my site. The agenda feature has some columns such as : title, description, date-start, date-end, place, time, notes. If I add too short description, the CSS messed up. Here's the screenshot :

https://i.ibb.co/FsWX9hC/error1.png

but if I add long texts on the description, it looks completely normal

https://i.ibb.co/7SyyyB5/normal.png

here's the code :

        <div class="row">
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="upcoming-events" role="tabpanel">
                  <?php foreach($data->result() as $row):?>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="event-date">
                                    <h4><?php echo date("d", strtotime($row->agenda_tanggal));?></h4> <span><?php echo date("M Y", strtotime($row->agenda_tanggal));?></span>
                                </div>
                                <span class="event-time"><?php echo $row->agenda_waktu;?></span>
                            </div>
                            <div class="col-md-10">
                                <div class="event-heading">
                                    <h3><?php echo $row->agenda_nama;?></h3>
                                    <p><?php echo $row->agenda_deskripsi;?></p>
                                </div>
                          </div>
                      </div>
                      <hr class="event-underline">
                  </div>
                <?php endforeach;?>

      <div class="col-md-12 text-center">
        <?php echo $page;?>
    </div>
</div>

</div>
</div>

Answer 1

A row may only have cols as it's direct children, but your outer row has a tab-content as a child.

You could move up the col-md-12 from the foreach loop, so that's directly beneath the outer row:

<div class="row">
  <div class="col-md-12">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="upcoming-events" role="tabpanel">
        <?php foreach($data->result() as $row):?>
          <div class="row">
            <div class="col-md-2">
              <div class="event-date">
                <h4><?php echo date("d", strtotime($row->agenda_tanggal));?></h4> <span><?php echo date("M Y", strtotime($row->agenda_tanggal));?></span>
              </div>
              <span class="event-time"><?php echo $row->agenda_waktu;?></span>
            </div>
            <div class="col-md-10">
              <div class="event-heading">
                <h3><?php echo $row->agenda_nama;?></h3>
                  <p><?php echo $row->agenda_deskripsi;?></p>
                </div>
            </div>
          </div>
          <hr class="event-underline">
        <?php endforeach;?>
        <div class="col-md-12 text-center">
          <?php echo $page;?>
        </div>
      </div>
    </div>
  </div>
</div>