CODEWITHSUNDEEP
cssflexbox
sonnyk2016
sonnyk2016

Reputation: 111

How to display two children in one row and third child in 2nd row

I'm trying to display User ID and the check mark in top row and the text box in 2nd row using flex. I'm unable to do this, so any help is greatly appreciated.

This is what I'm getting:

My display

<body>        
  <div style="display:flex; flex-direction:row; width:100%;">
       <div>User ID</div>
       <img style="margin-right:3px; align-self:center;" src="correct.png" /> 
       <div><input type="text" name="fname"></div> 
  </div>      
</body>

This is what I want:

What I want

Upvotes: 2

Views: 346

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

Change the HTML (move the close </div> of flex after the <img>)

<div style="display:flex;">
       <div>User ID</div>
       <img style="margin-right:3px; align-self:center;" src="correct.png" /> 
</div>  
<div><input type="text" name="fname"></div>

Upvotes: 3

Xenio Gracias
Xenio Gracias

Reputation: 2758

i have put user id and img in 1 div and made it flex

<body>
  <div>
    <div style="display:flex; width:100%;">
      <div>User ID</div>
      <img style="margin-right:3px; align-self:center;" src="correct.png" />
    </div>
    <div><input type="text" name="fname"></div>
  </div>
</body>

Upvotes: 2

Related Questions