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

Questions

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

July 20, 2022

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

>Solution :

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

Getting the labels the right width will require a bit of tweaking on your part, I’ve used .fieldGroup label { width: 10vw } as a loose value. Best is to use a pixel (px) value which will very much depend on the font family and size

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

.fieldGroup {
  align-items: center;
  display: flex;
  gap: 1rem;
}
.fieldGroup:not(:last-of-type) { margin-bottom: 1rem }

.fieldGroup label { width: 10vw }
.fieldGroup input { flex-grow: 1 }

<form style="padding: 2rem">
  <div class="fieldGroup">
    <label>Name</label>
    <input type="text" placeholder="Enter your name&hellip;">
  </div>
  <div class="fieldGroup">
    <label>E-mail</label>
    <input type="email" placeholder="Enter your e-mail&hellip;">
  </div>
  <div class="fieldGroup">
    <label>Really long label here to easily test wrapping</label>
    <input type="text" placeholder="???">
  </div>
</form>