没有包装div的情况下将元素并排放置

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>