SOURCE

<h1>
  job application
</h1>
<form action="">
  <div class="fieldset-wrapper">
    <fieldset>
      <legend>
        Your contact details
      </legend>
      <p class="field field-text">
        <label for="applicant-name">
          Name:
        </label>
        <input name="applicant-name" id="applicant-name" type="text" />
      </p>
      <p class="field field-text">
        <label for="applicant-email">
          Email Address:
        </label>
        <input name="applicant-email" id="applicant-email" type="email" />
      </p>
      <p class="field field-text">
        <label for="applicant-twitter">
          Twitter handle:
        </label>
        <span class="field-prefixed">
          <span class="field-prefix" id="applicant-twitter-prefix" aria-label="You can omit the @">
            @
          </span>
          <input aria-describedby="applicant-twitter-prefix" name="applicant-twitter"
          id="applicant-twitter" type="text" />
        </span>
      </p>
    </fieldset>
  </div>
</form>

input {
  font: inherit;
}

fieldset {
  border: 0;
  padding: 0.01em 0 0 0;
  margin: 0;
  min-width: 0;
}

.fieldset-wrapper {
  padding: 1em;
  margin-bottom: 1em;
  border: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 0 .25em rgba(0, 0, 0, 0.25);
}

.field-text label,
.field-text input,
.field-prefixed {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.field-text input {
  padding: .375em .3125em .3125em;
  border: 1px solid #ccc;
  border-radius: .25em;
}

.field-prefixed {
  display: flex;
}

.field-prefix {
  background-color: #f5f8f8;
  color: #666f77;
  border: 1px solid #ccc;
  padding: .375em .375em .3125em .375em;
  box-sizing: border-box;
  border-radius: .25em;
  display: flex;
  border-right: 0;
  border-radius: .25em 0 0 .25em;
  align-items: center;
}

.field-prefixed input {
  max-width: 12em;
  max-width: 100%;
  border-radius: 0 .25em .25em 0;
  flex: 1 1 100%;
}

@media only screen and (min-width: 35em) {
  .field-text {
    display: flex;
    max-width: 28em;
  }
  .field-text label {
    flex: 0 0 8em;
    display: flex;
    align-items: center;
  }
}