Vertically align the text of each cell - css

Question

I would like to know if there exists a technique to make the text set at the same line or at the same level because what I did is to add a line-height for my two first blocks but if I add a line-height for the others there is still a difference. It creates a weird look because my titles are not the same in each cell.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>

Answer 1

All you need is vertical-align:baseline on the table cells. td elements have vertical-align:middle by default.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
vertical-align:baseline;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>