Can't get label inline with span for email - html

Question

So, I'm trying to send an email with information from a user. It should look like this:
But for some reason the css won't work in the email, as it looks like this:
The CSS is as follows:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
padding-top: .1em;
padding-right: .25em;
width: 6em;
text-align: right;
float: left;
}
div.block span {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
}
And my HTML:
<div class="block">
<label>Voornaam:</label>
<span>%voornaam%</span>
</div>
<div class="block">
<label>Achternaam:</label>
<span>%achternaam%</span>
</div>
<div class="block">
<label>E-mailadres:</label>
<span>%email%</span>
</div>
<div class="block">
<label>Telefoon:</label>
<span>%telefoon%</span>
</div>
<div class="block">
<label>Toelichting:</label>
<span>%toelichting%</span>
</div>
<div class="block">
<label>Datum:</label>
<span>%datum%</span>
</div>

Answer 1

CSS in emails is still not supported very well. For the layout you want, using a <table> with inline styles instead of a div-based layout would be the best way to achieve it.

Answer 2

If the images is what you need a table would do fine. You can adjust the padding-left to what you think is best for the layout. You can add a margin-left: 10px or something to the table itself to move the table more to the right.
<table class="emailtable">
<tr>
<td>Voornaam:</td>
<td style="padding-left: 40px;">%voornaam%</td>
</tr>
<tr>
<td>Achternaam:</td>
<td style="padding-left: 40px;">%achternaam%</td>
</tr>
<tr>
<td>E-mailadres:</td>
<td style="padding-left: 40px;">%email%</td>
</tr>
<tr>
<td>Telefoon:</td>
<td style="padding-left: 40px;">%telefoon%</td>
</tr>
<tr>
<td>Toelichting:</td>
<td style="padding-left: 40px;">%toelichting%</td>
</tr>
<tr>
<td>Datum:</td>
<td style="padding-left: 40px;">%datum%</td>
</tr>

Answer 3

A few simple modifications in your CSS will fix that:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
padding-top: .1em;
padding-right: 2em;
width: 6em;
text-align: right;
}
div.block span {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
width: 20em;
}
I prepared a jsfiddle as a demonstration: https://jsfiddle.net/zL2ntzdh/
That said I would like to add that using HTML markup in email messages is a questionable thing. Yes, it does make the message look a bit more shiny. But it comes with huge disadvantages: the message size will get multiplied, the chances of your message being considered SPAM is automatically multiplied, you request ultimate trust from the addressees, so you have to expect that many of them will silently delete the message to prevent security issues.