CODEWITHSUNDEEP
htmlcss
Uss
Uss

Reputation: 71

How to make input side by side with limited html structure

I have limited html structure on my html form, basically, I can't wrap it with div, so I use inline-block to make the input side by side, however, when error message shows up, it makes my input stacks up, instead of inline.

When I check the error message, it seems there's a width, so I use width 30%, however, my input still not inline.

I tried different display, but no luck, any idea to make my input inline with limited html?

<p class="form-field  phone pd-text required   error ">
                
    <label class="field-label">Téléphone</label>
    <input type="text" value="" class="text" size="30" maxlength="40" onchange="" onfocus="" placeholder="Téléphone">
</p>

<p class="error no-label" style="border: 1px solid;width: 170px;">This field is required</p>

width 30% but still shows margin

Upvotes: 0

Views: 157

Answers (1)

Chris Schober
Chris Schober

Reputation: 178

.main {
width:500px;
}

.input-group {
display:flex;
align-items:center;
width:100%;
gap:2rem;
}

label {
 width:50%;
 display:flex;
 flex-direction:column;
}

label span {
 font-size:0.8rem;
}
<div class="main">
  <div class="input-group">
    <label>
      <span>Name</span>
      <input id="name" name="name">
    </label>
    <label>
      <span>Telefon</span>
      <input id="name" name="name">
    </label>
  </div>
 </div>

Upvotes: 1

Related Questions