Search code examples
cssinputsizefield

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

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>