CODEWITHSUNDEEP
css
Sage
Sage

Reputation: 200

How to place a <div> to the right of an input field

this is a CSS question.

I have a form, and after each label I have a $ so that I can show a dollar sign before each text input field. However, it's showing up like this:

Label
$
input field

How can I make the '$' <div> be IN FRONT OF the input field?

I tried floating the $ <div> left and making the input go right but that did nothing. I tried changing the width of the two items but that didn't help either. Display: inline-block further did nothing...

Anyone know how to fix this?

Upvotes: 0

Views: 200

Answers (2)

Nandhu
Nandhu

Reputation: 339

div,input{
  display:inline-block;
  vertical-align:top;
}
<form>
  <div>$</div>
  <input type="text" >
 </form>

give display:inline-block to both input and div, in case it has alignment issue add vertical-align:top;

Upvotes: 1

Geeky
Geeky

Reputation: 7498

you can use display:flex and do it as follows

form {
  display: flex;
}
<form>
  <div>$</div>
  <input type="text">
</form>

Hope this helps

Upvotes: 0

Related Questions