<body dir="rtl">
  <h1>Form fields</h1>
  <form>
    <section>
      <label for="namefield">Name</label>
      <input type="text" id="namefield">
    </section>
    <section>
      <label for="emailfield">Email</label>
      <input type="email" id="emailfield">
    </section>
  </form>
</body>
section {
  margin-block-start: var(--metric-box-spacing);
  display: flex;
  flex-direction: row;
}

h1 {
  margin-inline-start: 2rem;
}

label {
  display: inline-block;
  width: 100%;
  max-width: 3em;
  text-align: start;
  margin-inline-end: 1em;
  margin-inline-start: 2rem;
}

input {
  width: 100%;
  max-width: 16em;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: 3px solid #555;
  margin-inline-end: 2rem;
}

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.