html css How to make input field change size without pushing text to next line-CodePudding

How to make input field change size without pushing text to next line? enter image description here

CodePudding user response：

Easiest way is going to be using display: flex, for more details read Basic concepts of flexbox on MDN.

If you want all the labels to be the same size you can add a width, maybe something like .fieldGroup label { width: 20vw } -- you will need to find a value that works best for you! Maybe even add some media queries.

/* BASIC RESET - not relvant to answer */ body { font: 16px sans-serif; margin: 0 }

.fieldGroup {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.fieldGroup input { flex-grow: 1 }

<form style="padding: 2rem">
  <div >
    <label>Name</label>
    <input type="text" placeholder="Name">
  </div>
  <div >
    <label>Email</label>
    <input type="email" placeholder="Email">
  </div>
  <div >
    <label>Something really long here to try wrap</label>
    <input type="text" placeholder="???">
  </div>
</form>

CodePudding user response：

Use display: flex in CSS

.container {
  width: 100px;
}

.flex {
  display: flex;
  align-items: center;
  gap: 5px;
}

<div >

  <b>With Flex:</b>
  <div >
    <label>Name</label>
    <input />
  </div>
  
  <br />
  
  <b>Without Flex:</b>
  <div>
    <label>Name</label>
    <input />
  </div>
  
</div>