CODEWITHSUNDEEP
htmlcssflexbox
Jessica
Jessica

Reputation: 9830

Display two items on first line and third item on the next line

I'm trying to have two items on one line, then have a third item on the next line. I stumbled upon this answer, but the answer didn't work for an input type="text". The input is on its own line, which results in each element having its own line.

Why doesn't it work, and how can I have the first two elements on one line, and the third element on the second line?

Working JSFiddle

Not Working JSFiddle

#wrapper {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#wrapper > * {
  flex: 1 0 50%;
}
#wrapper > *:last-child {
  flex: 0 1 100%;
}
<div id="wrapper" style="background-color: rgb(144, 248, 144);">
  <label id="first">First Text</label>
  <input type="text" id="second">
  <span id="third">Third Text</span>
</div>

Upvotes: 2

Views: 784

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

I think the problem is default border and padding on input element so you can fix this with box-sizing: border-box

* {
  box-sizing: border-box;
}
#wrapper {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#wrapper > * {
  flex: 1 0 50%;
}
#wrapper > *:last-child {
  flex: 0 1 100%;
}
<div id="wrapper" style="background-color: rgb(144, 248, 144);">
  <label id="first">First Text</label>
  <input type="text" id="second">
  <span id="third">Third Text</span>
</div>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371241

The input breaks to the next line because it has a 2px border applied by the user agent stylesheet.

enter image description here

To keep the input on the first line you could specify:

input { border-width: 0; }

DEMO

OR

alter the CSS box model to make padding and borders part of the width declaration:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

DEMO

Upvotes: 1

Related Questions