Building Forms

<form>
  <FormGroupContainer>
    <FormGroupContainer horizontal>
      <FormGroup>
        <TextField label="Name" />
      </FormGroup>
      <FormGroup>
        <TextField label="Surname" />
      </FormGroup>
    </FormGroupContainer>
    <Divider margin />
    <FormGroupContainer horizontal>
      <FormGroup>
        <v
          block
          label="Country"
          options={[
            {
              label: 'Option',
              value: 1
            }
          ]}
          placeholder="Select Country"
        />
      </FormGroup>
      <FormGroup>
        <v
          block
          label="State"
          options={[
            {
              label: 'Option',
              value: 1
            }
          ]}
          placeholder="Select State"
        />
      </FormGroup>
    </FormGroupContainer>
    <FormGroup>
      <TextArea label="Bio" />
    </FormGroup>
  </FormGroupContainer>
</form>

<form>
  <div class="form-group-container">
    <div class="form-group-container-horizontal">
      <div class="form-group">
        <div class="form-group">
          <label>Name</label>
          <div class="input-group">
            <input type="text" class="form-control" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group">
          <label>Surname</label>
          <div class="input-group">
            <input type="text" class="form-control" />
          </div>
        </div>
      </div>
    </div>
    <div class="divider-horizontal divider-margin"></div>
    <div class="form-group-container-horizontal">
      <div class="form-group">
        <div class="form-group">
          <span class="content-title">Country</span>
          <div class="outer-events-handler dropdown btn-group select">
            <button class="btn btn-block dropdown-toggle" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false" type="button" role="button">Select Country
            </button>
            <div class="dropdown-menu bottom-right">
              <button class="btn dropdown-item" type="button" role="button">Option</button>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group">
          <span class="content-title">State</span>
          <div class="outer-events-handler dropdown btn-group select">
            <button class="btn btn-block dropdown-toggle" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false" type="button" role="button">Select State
            </button>
            <div class="dropdown-menu bottom-right">
              <button class="btn dropdown-item" type="button" role="button">Option</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label>Bio</label>
        <textarea class="form-control"></textarea>
      </div>
    </div>
  </div>
</form>