Search code examples
htmlcssalignment

CSS: align element to the right end of its container

Goal

Inside a form, I want to align my row-based fields so that the title of the field is left-aligned, but the inputs are right-aligned.

My form looks like this

<form class="settings", id="settings", onsubmit="OnSubmit();">
    <label class="section-title">Basic</label>
    <div class="separator"></div>
    <section class="setting">
        <div class="field">
            <span class="field-title">Name: </span>
            <span class="entry-group">
                <label class="entry-underlined">
                    <input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
                </label>
            </span>
        </div>
    </section>
    .....

<form/>

So for example, I'd love the span.field-title to left align, but the input "myfield" to right align.

Attempts

I've tried many solutions such as flex and align-content, but none worked for me, including

input.entry {
  display: flex;
  justify-content: flex-end;
  float: right;
  vertical-align: middle;
}

enter image description here

Question

I need a general direction and working solution of such tasks because it seems an area to revisit often.

Solution

  • Something like this??

    .field {
  display: flex;
  justify-content: space-between;
}
    <form class="settings" , id="settings" , onsubmit="OnSubmit();">
  <label class="section-title">Basic</label>
  <div class="separator"></div>

  <section class="setting">
    <div class="field">
      <span class="field-title">Name: </span>
      <span class="entry-group">
                <label class="entry-underlined">
                    <input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
                </label>
            </span>
    </div>
  </section>


  <form/>