Vertical align und solid row divider

Question

Ich habe ein Panel mit zwei Reihen. Jede Zeile hat 2 Spalten. Was ich brauche ist, den linken Text (Spalte 1) mit der Höhe der rechten Auswahl (Spalte 2) vertikal auszurichten.

Das ist, was ich habe:

Auch ich habe nicht die Standardzeile haben, die jede Zeile teilen. Ich kaufte eine Vorlage kann ich in einigen der CSS-Dateien eine Überschreibung, aber ich kann nicht nichts

Der Code für das Panel ist sehen:

<div class="wrapper_indent"> 
@foreach($dias as $dia) 
    <div class="panel panel-default"> 
     <div class="form-control header-card"> 
      {{$dia['nombre'] }} 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <span class="body-card">Primer turno</span> 
      </div> 
      <div class="col-sm-6"> 
       <select name="example" class="form-control selecthora"> 
        @foreach($dia['horarios'] as $horario) 
         <option {{ ($dia['valorInicio']===$horario)?'selected="selected"':''}} value="{{$dia['valorInicio']}}">{{$horario}}</option> 
        @endforeach 
       </select> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <span class="body-card">Último turno</span> 
      </div> 
      <div class="col-sm-6"> 
       <select name="example" class="form-control selecthora"> 
        @foreach($dia['horarios'] as $horario) 
         <option {{ ($dia['valorFin']===$horario)?'selected="selected"':''}} value="{{$dia['valorFin']}}">{{$horario}}</option> 
        @endforeach 
       </select> 
      </div> 
     </div> 
    </div> 
@endforeach 

</div><!-- End wrapper_indent --> 

Meine benutzerdefinierte CSS für den Versuch, das Problem zu lösen ist das folgende:

.body-card{ 
    font-size: 12px; 
    display: inline-block; 
    vertical-align: middle; 
    font-weight: bold; 
} 

Danke für Hilfe!

Answer 1

.panel .row { 
    display: flex; 
    align-items: center; //for vertical-alignment 
    justify-content: center; //for horizontal-alignment 
}