Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<div class="m-form__group form-group row">
  <label class="col-3 col-form-label font-weight-bold">Which One</label>
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input type="radio" name="notification_type_id" value="1"> SMS
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="notification_type_id" value="2"> Email
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="notification_type_id" value="3"> Text
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="notification_type_id" value="4" checked> Bla
        <span></span>
      </label>
    </div>
  </div>
</div>


<hr>


<div class="col-md-8 offset-md-2">

  <div class="m-form__group form-group row">
    <div class="col-9">
      <div class="m-radio-inline mt-3 type_selector">
        <label class="m-radio1">
          <input type="radio" name="type" value="product" data-id="specific_product"> First
          <span></span>
        </label>
        <label class="m-radio1">
          <input type="radio" name="type" value="keyword" required="" data-id="search_term" checked> Second
          <span></span>
        </label>
      </div>
    </div>
  </div>
  <style>
    /*hides element*/

    .hidden {
      display: none;
    }

  </style>
  <div class="first">
    <label for="" class="mt-2 mb-2"><strong>First Content</strong></label>
    <select class="form-control m-select2 select2-hidden-accessible" id="m_select2_1" name="product_id" data-select2-id="m_select2_1" tabindex="-1" aria-hidden="true">
      <option...

CSS

body {
  margin: 10px;
}