CSS and vertical alignment with flexbox: it won't ever align

September 1, 2022

I can’t manage to get my text to vertical align to the center of a div. I tried so simplify the problem as much as I could but it still doesn’t work.

I tried with display:table but I need flexbox so that my columns are the right width and it didn’t work either anyway. Removing elements one by one didn’t bring me to the answer…

Edit: there is no span so it’s not a problem of the last element being inline.

.row {
    display: flex;
      align-items: center;
    margin-left: 44px;
    margin-right: 44px;
      margin-top: 10px;
}

.column_left {
    flex: 28%;
}

.column_right {
    flex: 72%;
}

.group_title {
    color: #000000;
    font-family: "Noto Serif";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
}

.group_description {
    width: 408px;
    color: #000000;
    font-family: "Noto Serif";
    font-size: 15px;
    letter-spacing: 0;
}

.exercise_list {
    height: 70px;
    background: #FFEFD5;
}

<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Les présentations</div>
        <div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
    </div>
</div>
<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Poser des questions pour faire connaissance</div>
        <div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
    </div>
</div>

Edit:
Removing the parent div to give both classes row and exercise_list to the child almost work, but I lose the margin to the left and the text is too close to the edge of the rectangle.

>Solution :

Take a look in the code:

.row {
    display: flex;
    align-items: space-arround;
  width:100%;
}

.column_left {
  padding-left:44px;
  flex:1;
}

.column_right {
  flex:2;
}

.group_title {
    color: #000000;
    font-family: "Noto Serif";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
}

.group_description {
    width: 408px;
    color: #000000;
    font-family: "Noto Serif";
    font-size: 15px;
    letter-spacing: 0;
}

.exercise_list {
    height: 70px;
    background: #FFEFD5;
  width:100%;
  display:flex;
  align-items:center;
}

<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Les présentations</div>
        <div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
    </div>
</div>
<div class="exercise_list">
    <div class="row">
        <div class="column_left group_title">Poser des questions pour faire connaissance</div>
        <div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
    </div>
</div>

add display:flex; to your .exercise_list elements