Placing elements next to each other without wrapper div - html

Question

I'm currently styling a WordPress site's contact form. The desired result should look something like this:
Normally, this could be easily achieved with a wrapper div around the text fields. Since this is WordPress, I can't do this without digging into the plugin (which is the last thing I want to do). The HTML WordPress produces looks like this:
<form ...>
<p class="..." data-id="name" data-type="input">
<label ...>Naam Achternaam</label>
<input type="text" ...>
</p>
<p class="..." data-id="company" data-type="input">
<label ...>Bedrijf</label>
<input type="text" ...>
</p>
<p class="..." data-id="email" data-type="input">
<label ...>E-mail</label>
<input type="email" ...>
</p>
<p class="..." data-id="phone" data-type="input">
<label ...>Telefoonnummer</label>
<input type="text" ...>
</p>
<p class="..." data-id="message" data-type="text">
<label ...>Vragen / opmerkingen</label>
<textarea ...></textarea>
</p>
...
</form>
which currently looks like this:
Is it possible to achieve what I'm after with this HTML structure or do I need to find a way to accommodate a wrapper div?

Answer 1

You could use position: absolute on the last p... not the nicest solution but a possible workaround without changing the HTML
form {
background: #00CDD4;
display: flex;
flex-direction: column;
position: relative;
}
form p {
margin: 1em;
display: flex;
flex-direction: column;
width: 45%;
}
form p label {
text-transform: uppercase;
font-family: sans-serif;
opacity: .87;
}
form p input {
border: none;
padding: 1em;
}
form p:last-of-type {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
form p:last-of-type textarea {
height: 100%;
}
<form>
<p class="..." data-id="name" data-type="input">
<label ...>Naam Achternaam</label>
<input type="text" ...>
</p>
<p class="..." data-id="company" data-type="input">
<label ...>Bedrijf</label>
<input type="text" ...>
</p>
<p class="..." data-id="email" data-type="input">
<label ...>E-mail</label>
<input type="email" ...>
</p>
<p class="..." data-id="phone" data-type="input">
<label ...>Telefoonnummer</label>
<input type="text" ...>
</p>
<p class="..." data-id="message" data-type="text">
<label ...>Vragen / opmerkingen</label>
<textarea ...></textarea>
</p>
</form>

Answer 2

I tried alot but following your requirements it seems only possible through position absolute. Just for fun I tried to make without display: flex;
body {
background-color: #2dccd3;
font-family: 'Montserrat', sans-serif;
}
form.contact{
position: relative;
}
p.contact-field {
width: 45%;
}
p.contact-field input{
width: 100%;
}
input, label {
display:block;
}
p.contact-field:last-child{
margin: 0px;
}
.contact-field:last-child{
position: absolute;
right: 0px;
top: 0px;
width: 50%;
height: 89%;
}
textarea#message{
height: 100%;
}
<form class="contact">
<p class="contact-field" data-id="name" data-type="input">
<label for="name">Naam Achternaam</label>
<input id="name" type="text" name="name">
</p>
<p class="contact-field" data-id="company" data-type="input">
<label for="company">Bedrijf</label>
<input id="company" type="text" name="company">
</p>
<p class="contact-field" data-id="email" data-type="input">
<label for="email">E-mail</label>
<input id="email" type="email" name="email">
</p>
<p class="contact-field" data-id="phone" data-type="input">
<label for="phone">Telefoonnummer</label>
<input id="phone" type="text" name="phone">
</p>
<p class="contact-field" data-id="message" data-type="text">
<label for="message">Vragen / opmerkingen</label>
<textarea id="message" name="message"></textarea>
</p>
</form>