CODEWITHSUNDEEP
htmlcss
KarlsFriend
KarlsFriend

Reputation: 745

Distribute Size of elements inside div

I want to display the unit of the input next to it. I don't want the unit "g" to break into the next line when the size of the div changes. The input should use all remaining space inside the div, as long as this does not cause a line break. 

<div style="width:100px">
  <input type="number" />
  g
</div>

Upvotes: 0

Views: 45

Answers (3)

Dhruvil21_04
Dhruvil21_04

Reputation: 2189

Easiest way and cross-browser supported way is using display - table and table-cell

You can wrap 'g' inside another <div>. Then you can get it in side-by-side irrespective of width by following CSS

body > div {
  display: table;
}
body > div > * {
    display: table-cell;
}
<div style="width:100px">
  <input type="number" />
  <div>g</div>
</div>

Upvotes: 1

Mohamed Mohaideen AH
Mohamed Mohaideen AH

Reputation: 2545

Try this.,

just give some room for the text to display

Change width of your div

<div style="width:200px;">
  <input type="number" />
  g
</div>

Upvotes: 0

Nineoclick
Nineoclick

Reputation: 814

Just use display:flex and surround internal elements with a div tag. More on flex you can find on Mother Google.

Hope this helps.

<div style="width:100px;display:flex;">
    <div><input type="number" /></div>
    <div>g</div>
</div>

Upvotes: 2

Related Questions