Blocks besides each others - html

Question

I have a given HTML which I can't touch:
<fieldset>
<label for="username" class="text">
Dein Benutzername<span class="req">*</span>
</label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">
Vorname<span class="req">*</span>
</label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label ....
and I need to output that one with 2 same-width columns where the label is above the corresponding div-block and the next input-div-block and their corresponding label is besides it.
I added an image to show exactly what I want it to be. I run into problems because the label-tag sits within the same hierarchy-level as the div-block and I therefore can't use inline-block nor - due to my lack of knwoledge - flexbox as it's a mix between column and row in flex-direction
Could somebody please guide me on that one?

Answer 1

You can still use flexbox and put the elements into a new order. It is not a elegant way but the only solution i can
think of if you cant touch the HTML
.text,
.div_text {
width: 50%;
display: block;
}
fieldset {
display: flex;
flex-wrap: wrap;
}
label {
display: block;
}
label[for=username] {
order: 1;;
}
label[for=first_name] {
order: 2;
}
fieldset div:nth-of-type(1){
order: 3;
}
fieldset div:nth-of-type(2){
order: 4;
}
label[for=sur_name] {
order: 5;
}
label[for=example] {
order: 6;
}
fieldset div:nth-of-type(3){
order: 7;
}
fieldset div:nth-of-type(4){
order: 8;
}
<fieldset>
<label for="username" class="text">Dein Benutzername<span class="req">*</span></label>
<div class="div_text">
<input name="username" type="text" id="username" value="" class="textbox" required="">
</div>
<label for="first_name" class="text">Vorname<span class="req">*</span></label>
<div class="div_text">
<input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
</div>
<label for="sur_name" class="text">Nachname<span class="req">*</span></label>
<div class="div_text">
<input name="sur_name" type="text" id="sur_name" value="" class="textbox" required="">
</div>
<label for="example" class="text">Weiters Beispiel<span class="req">*</span></label>
<div class="div_text">
<input name="example" type="text" id="example" value="" class="textbox" required="">
</div>
</fieldset>

Answer 2

Hoping you are not using any css framework, please have a look at the below-working snippet with custom markup and css, hope it helps :)
body {
font-size: 14px;
font-family: sans-serif;
}
fieldset {
clear: both;
max-width: 500px;
border: 1px dashed deeppink;
}
legend {
color: #fff;
font-size: 14px;
padding: 5px 10px;
background: deeppink;
margin: 0 0 10px 15px;
}
.form-group {
width: 45%;
float: left;
padding: 0 2.5%;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
font-size: 14px;
padding: 5px 3px;
margin-bottom: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
<fieldset>
<legend>Fieldset Container</legend>
<div class="form-group">
<label for="labelX">Label x</label>
<input id="labelX" type="text" placeholder="Label X" />
</div>
<div class="form-group">
<label for="labelY">Label y</label>
<input id="labelY" type="text" placeholder="Label Y" />
</div>
<div class="form-group">
<label for="labelZ">Label z</label>
<input id="labelZ" type="text" placeholder="Label Z" />
</div>
<div class="form-group">
<label for="labelXX">Label xx</label>
<input id="labelXX" type="text" placeholder="Label XX" />
</div>
</fieldset>