Flex - 2cols form - fixed label width and RTL

flex-2cols-form-fixed-label-width-and-rtl.markdown

Flex - 2cols form - fixed label width and RTL

A Pen by Jan on CodePen.

License.

index.html

<div class="grid-2cols"><!-- remove the class for change-->
  
  <div class="field">
    <label for="text-input-1">Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-1">
        <button>Button</button>
      </div>
    </div>
  </div>
  
  <div class="field">
    <label for="text-input-2">Another Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-2" style="width: 300px;">
        <button>Button</button>
      </div>
    </div>
  </div>

</div>


<div class="grid-2cols horizontal"><!-- remove the class for change-->
  
  <div class="field">
    <label for="text-input-1">Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-1">
        <button>Button</button>
      </div>
    </div>
  </div>
  
  <div class="field">
    <label for="text-input-2">Another Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-2" style="width: 300px;">
        <button>Button</button>
      </div>
    </div>
  </div>

</div>

<hr>
<h2>RTL</h2>

<div class="grid-2cols" dir="rtl"><!-- remove the class for change-->
  
  <div class="field">
    <label for="text-input-1">Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-1">
        <button>Button</button>
      </div>
    </div>
  </div>
  
  <div class="field">
    <label for="text-input-2">Another Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-2" style="width: 300px;">
        <button>Button</button>
      </div>
    </div>
  </div>

</div>


<div class="grid-2cols horizontal" dir="rtl"><!-- remove the class for change-->
  
  <div class="field">
    <label for="text-input-1">Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-1">
        <button>Button</button>
      </div>
    </div>
  </div>
  
  <div class="field">
    <label for="text-input-2">Another Form label</label>
    <div class="form-input">
      <div class="box">
        <input type="text" value="text input" id="text-input-2" style="width: 300px;">
        <button>Button</button>
      </div>
    </div>
  </div>

</div>

style.scss

/* Unused grid, normal layout */
.grid-2cols {
//   display: grid;
//   grid-template-columns: minmax(100px, max-content) max-content;
//   align-items: center;
//   // grid-gap: 1em;

//   label {
//     grid-column: 1 / 1;
//   }

//   .form-input {
//     grid-column: 1 / 1;  /* CHANGE TO: 2 / 3 */
//   }
}

.field {
   display: flex;
}

.horizontal {
  .field {
    flex-direction: column;
  }
}

label {
  display: block;
  margin-left: 2em;
  margin-bottom: .2em;
  width: 200px; /* this is needed to align in colums*/
}

.horizontal {
  label,
  .form-input {
    // display: inline-block;
  }
}

/* Just styling */
.form-input {
  display: block;
  margin-left: 2em;
  margin-bottom: 1.5em;
}

.box {
  border: 4px solid gray;
  display: inline-block;
}

input {
  border: 1px dotted #999;
}