1-before.scss

$field-height: 60px;

.fields-group {
  margin-bottom: 40px;
  text-align: left;

  .field {
    margin-bottom: 10px;

    &:first-child label { border-top-left-radius: 10px; }
    &:last-child label { border-bottom-left-radius: 10px; }
  }

  .control { margin: 0 0 20px; }

  label { color: rgba($grey, .8); }

  .field.check-box {
    margin-bottom: 5px;

    .control {
      float: left;
      width: 20px;
    }

    label {
      float: right;
      width: calc(100% - 20px);
    }
  }

  [type=text],
  [type=number],
  [type=email],
  [type=password] {
    @include appearance(none);
    border: 1px solid $light-border-color;
    padding: 5px 10px;
    width: 100%;
    border-radius: 5px;
  }

  select {
    width: 100%;
    max-width: 100%;
  }

  textarea {
    line-height: 20px;
    width: 100%;
    min-height: 100px;
    border: 1px solid $light-border-color;
    padding: 10px;
    border-radius: 5px 5px 0 5px;
  }
}

@include bp-md {
  .fields-group {
    border: 1px solid $light-border-color;
    border-radius: 10px;
    text-align: left;

    .field {
      position: relative;
      margin-bottom: 0;
      border-bottom: 1px solid $light-border-color;
      min-height: $field-height;
      line-height: $field-height;
      &:last-child { border-bottom: 0; }
    }

    .field.check-box {
      margin-bottom: 0;

      label {
        float: left;
        width: 80%;
      }

      .control {
        float: right;
        width: 20%;
        text-align: center;
        margin: 0;
      }
    }

    .field.full {
      label, .control {
        float: none;
        width: auto;
        text-align: left;
      }

      .control {
        padding-bottom: 20px;
      }
    }

    .field.no-label {
      .control {
        float: none;
        width: auto;
        left-align: left;
      }

      input[type=text],
      input[type=number],
      input[type=email] {
        padding: 5px 0;
      }

      // For checkboxes within this style
      label {
        display: inline;
        margin-right: 10px;
        border: 0;
        background: none;
        padding: 0;
        width: auto;
        color: $black;
      }

      select {
        @include appearance(none);
        border: 0;
        background: none;
        color: $black;
      }
    }

    .field.textarea {
      padding-top: 20px;
      textarea { border: none; width: 100%; min-height: 100px; padding: 0; resize: none; }
      .control { padding: 0 20px; }
    }

    label,
    .control {
      padding: 0 20px;
      width: 50%;
      height: 100%;
      margin: 0;
    }

    label {
      float: left;
      border-right: 1px solid $light-border-color;
      background-color: $smoke;
      color: lighten($grey, 20%);
    }

    .control {
      float: right;

      &.full {
        float: none;
        width: 100%;
      }
    }

    [type=text],
    [type=number],
    [type=email],
    [type=password] {
      border: 0;
      width: 100%;
    }
  }
}

2-after.scss

$field-height: 60px;

.fields-group {
  margin-bottom: 40px;
  text-align: left;

  @include bp-md {
    border: 1px solid $light-border-color;
    border-radius: 3px;
    text-align: left;
  }
}


.fields-group__row {
  margin-bottom: 10px;
  &:first-child > .fields-group__label { border-top-left-radius: 3px; }
  &:last-child > .fields-group__label { border-bottom-left-radius: 3px; }

  @include bp-md {
    position: relative;
    margin-bottom: 0;
    border-bottom: 1px solid $light-border-color;
    min-height: $field-height;
    line-height: $field-height;
    &:last-child { border-bottom: 0; }
  }
}

.fields-group__label,
.fields-group__control {
  @include bp-md {
    margin: 0;
    padding: 0 20px;
    width: 50%;
    height: 100%;
  }
}

.fields-group__label {
  color: rgba($grey, .8);

  @include bp-md {
    float: left;
    border-right: 1px solid $light-border-color;
    background-color: $smoke;
    color: lighten($grey, 20%);
  }
}

.fields-group__control {
  margin: 0 0 20px;

  @include bp-md {
    float: right;
    margin-bottom: 0;
  }
}

// Inputs
.fields-group__text-input {
  @include appearance(none);
  border: 1px solid $light-border-color;
  border-radius: 5px;
  padding: 5px 10px;
  width: 100%;

  @include bp-md {
    border: 0;
    width: 100%;
  }
}

.fields-group__text-input--multiline {
  padding: 10px;
  min-height: 100px;
  line-height: 20px;
}

.fields-group__select {
  width: 100%;
  max-width: 100%;

  @include bp-md {
    @include appearance(none);
    border: 0;
    background: none;
    color: $black;
  }
}

// Checkboxes are a bit different
.fields-group__row--check-box {
  margin-bottom: 5px;

  @include bp-md {
    margin-bottom: 0;
  }
}

.fields-group__label--check-box {
  float: right;
  width: calc(100% - 20px);

  @include bp-md {
    float: left;
    width: 80%;
  }
}

.fields-group__control--check-box {
  float: left;
  width: 20px;

  @include bp-md {
    float: right;
    margin: 0;
    width: 20%;
    text-align: center;
  }
}

// "Full" style fields
.fields-group__label--full,
.fields-group__control--full {
  @include bp-md {
    float: none;
    width: auto;
    text-align: left;
  }
}

.fields-group__control--full {
  @include bp-md {
    float: none;
    padding-bottom: 20px;
    width: 100%;
  }
}

// No-label (placeholder-only) styles
.fields-group__control--no-label {
  @include bp-md {
    float: none;
    width: auto;
    text-align: left;
  }
}

.fields-group__text-input--no-label {
  @include bp-md {
    padding: 5px 0;
  }
}