Align labels in form next to input

Question

I have very basic and known scenario of form where I need to align labels next to inputs correctly  However I don t know how to do it   My goal would be that labels are aligned next to inputs to the right side  Here is picture example of desired result     I have made a fiddle for your convenience and to clarify what I have now - http   jsfiddle net WX58z   Snippet    x000D   x000D   lt div class  block  gt  x000D       lt label gt Simple label lt  label gt  x000D       lt input type  text    gt  x000D   lt  div gt  x000D   lt div class  block  gt  x000D       lt label gt Label with more text lt  label gt  x000D       lt input type  text    gt  x000D   lt  div gt  x000D   lt div class  block  gt  x000D       lt label gt Short lt  label gt  x000D       lt input type  text    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Answered a question such as this before  you can take a look at the results here   Creating form to have fields and text next to each other - what is the semantic way to do it   So to apply the same rules to your fiddle you can use display inline-block to display your label and input groups side by side  like so   CSS  input       margin-top  5px      margin-bottom  5px      display inline-block       display  inline         for IE7       zoom 1                  for IE7       vertical-align middle      margin-left 20px    label       display inline-block       display  inline         for IE7       zoom 1                  for IE7       float  left      padding-top  5px      text-align  right      width  140px      updated fiddle

User · Answer

Here is generic labels width for all form labels  Nothing fix width   call setLabelWidth calculator with all the labels   This function will load all labels on UI and find out maximum label width  Apply return value of below function to all the labels        this setLabelWidth   function  labels                var d   labels join   lt br gt                     dummyelm   jQuery   lblWidthCalcHolder                    width              dummyelm empty   html d               width   Math ceil dummyelm 0  getBoundingClientRect   width               width   width  gt  0   width   5  width                this resetLabels      to reset labels              var element   angular element   lblWidthCalcHolder   0               element style visibility    hidden                 Removing all the lables from the element as width is calculated and the element is hidden             element innerHTML                   return                   width  width                  validWidth  width     0

User · Answer

WARNING  OUTDATED ANSWER Nowadays you should definitely avoid using fixed widths  You could use flexbox or CSS grid to come up with a responsive solution  See the other answers    One possible solution   Give the labels display  inline-block  Give them a fixed width Align text to the right  That is   x000D   x000D  label     display  inline-block    width  140px    text-align  right     x000D   lt div class  block  gt       lt label gt Simple label lt  label gt       lt input type  text    gt   lt  div gt   lt div class  block  gt       lt label gt Label with more text lt  label gt       lt input type  text    gt   lt  div gt   lt div class  block  gt       lt label gt Short lt  label gt       lt input type  text    gt   lt  div gt  x000D   x000D   x000D   JSFiddle

User · Answer

You can also try using flex-box   lt head gt  lt style gt  body       color white      font-family arial      font-size 1 2em    form       margin 0 auto      padding 20px      background  444     input-group       margin-top 10px      width 60       display flex      justify-content space-between      flex-wrap wrap    label  input       flex-basis 100px     lt  style gt  lt  head gt   lt body gt    lt form gt       lt div class  wrapper  gt           lt div class  input-group  gt               lt label for  user name  gt name  lt  label gt               lt input type  text  id  user name  gt           lt  div gt           lt div class  input-group  gt               lt label for  user pass  gt Password  lt  label gt               lt input type  password  id  user pass  gt           lt  div gt       lt  div gt   lt  form gt    lt  body gt   lt  html gt

User · Answer

I use something similar to this    lt div class  form-element  gt     lt label for  foo  gt Long Label lt  label gt     lt input type  text  name  foo  id  foo    gt   lt  div gt    Style    form-element label       display  inline-block      width  150px

User · Answer

While the solutions here are workable  more recent technology has made for what I think is a better solution  CSS Grid Layout allows us to structure a more elegant solution   The CSS below provides a 2-column  settings  structure  where the first column is expected to be a right-aligned label  followed by some content in the second column  More complicated content can be presented in the second column by wrapping it in a  lt div gt      As a side-note  I use CSS to add the     that trails each label  as this is a stylistic element - my preference     x000D   x000D     CSS    x000D   x000D  div settings   x000D      display grid  x000D      grid-template-columns  max-content max-content  x000D      grid-gap 5px  x000D    x000D  div settings label         text-align right    x000D  div settings label after   content         x000D   lt  -- HTML -- gt  x000D   x000D   lt div class  settings  gt  x000D       lt label gt Label  1 lt  label gt  x000D       lt input type  text    gt  x000D   x000D       lt label gt Long Label  2 lt  label gt  x000D       lt span gt Display content lt  span gt  x000D   x000D       lt label gt Label  3 lt  label gt  x000D       lt input type  text    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can do something like this   HTML    lt div class  div  gt   lt label gt Something lt  label gt   lt input type  text  class  input   gt   lt div gt    CSS    div        margin-bottom  10px        display  grid        grid-template-columns  1fr 4fr      input         width  50       Hope this helps

User · Answer

I know this is an old thread but an easier solution would be to embed an input within the label like so    x000D   x000D   lt label gt Label one   lt input id  input1  type  text  gt  lt  label gt  x000D   x000D   x000D

[html] Align labels in form next to input

Examples related to html

Examples related to css

Examples related to alignment