title: Fix div position in a form
body: <p>I am using the same form on two different pages. On the first one every div is tidy in the desired position. On the second page, there is a select that only appears after a change (jquery trigger), which causes the div below it to appear first on the right but after the trigger it moves on the left. I'd like the div which contains radio buttons to be on the left side at all times, just like it is on the first page. The part that I'd like to fix is <code>#center-add-new-event-form .container-field input[type=radio]</code>.</p>
  
  <p>This is the css.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#center-add-new-event-form,
  #center-add-new-event-form * {
      box-sizing: border-box;
  }
  
  #center-add-new-event-form {
      padding: 20px 10px 0px;
  }
  
  #center-add-new-event-form .container-field {
      width: 50%;
      float: left;
      padding: 0 10px;
      margin-bottom: 20px;    
      vertical-align: top;    
  }
  
  #center-add-new-event-form .container-field label {
      display: block;
      font-weight: 600;
      margin-bottom: 5px;
  }
  
  #center-add-new-event-form .container-field input[type=text],
      #center-add-new-event-form .container-field select {
      height: 34px;
      border: 1px solid #ddd;
      padding: 0 7px;
      display: block;    
      width: 100%;
  }
  
  #center-add-new-event-form .container-field input[type=radio]
  {
      height: 34px;
      border: 1px solid #ddd;
      padding: 0 7px;
      display: block;    
      width: 100%;
  }
  
  
  #center-add-new-event-form .center-error-message {
      font-size: 0.9em;
      color: darkred;
      display: block;
      margin-left: 1px;
  }
  
  .center-event-actions {
      border-top: 1px solid #ddd;
      padding: 20px 20px 15px;
      text-align: right;
  
  }
  
  .clearfix:before,.clearfix:after {  
      display: table;  
      content: " ";
  }
  
  .clearfix:after {
      clear: both;
  }
  
  
  @media screen and (max-width: 767px) {
      #center-add-new-event-form .container-field {
          float: none;
          width: 100%;
      }   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="center-add-new-event-form" class="clearfix"&gt;
  
  
  
      &lt;div class="container-field" style="width: 100%"&gt;
              &lt;label&gt;&lt;/label&gt;
              &lt;div id="center-request-details"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="container-field"&gt;
              &lt;label for="teaching-requests"&gt;&lt;/label&gt;
              &lt;select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all"&gt;
                  &lt;option value=""&gt;&lt;/option&gt;
  
                          &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
              &lt;span class="center-error-message"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="container-field"&gt;
              &lt;label for="request-date"&gt;&lt;/label&gt;
              &lt;input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all"&gt;
              &lt;span class="center-error-message"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;div class="container-field"&gt;
          &lt;label for="teaching-start-time"&gt;&lt;/label&gt;
          &lt;input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all"&gt;
          &lt;span class="center-error-message"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;span class="clearfix"&gt;&lt;/span&gt;
  
      &lt;div class="container-field"&gt;
          &lt;label for="teaching-end-time"&gt;&lt;/label&gt;
          &lt;input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all"&gt;
          &lt;span class="center-error-message"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="container-field"&gt;
          &lt;label for="teaching-teacher"&gt;&lt;/label&gt;
          &lt;div id='contanier-teacher-selection'&gt;
  
          &lt;/div&gt;
          &lt;span class="center-error-message"&gt;&lt;/span&gt;
  
      &lt;/div&gt;           
      &lt;div class="container-field pull-left" align="left"&gt;
          &lt;label for="recursive-events" align="left"&gt;
          &lt;input type="radio" align="left" name="recursive" value="daily"/&gt;Daily
          &lt;input type="radio" align="left" name="recursive" value="weekly"/&gt;Weekly
          &lt;input type="radio" align="left" name="recursive" value="monthly"/&gt;Monthly
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;span class="center-error-message"&gt;&lt;/span&gt;        
  &lt;/form&gt;
  
  &lt;div class="center-event-actions"&gt;
      &lt;button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"&gt;&lt;/button&gt;
      &lt;button id="add-new-event" class='button button-primary'&gt;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/8oOWq.png" rel="nofollow noreferrer">Before</a>
  <a href="https://i.stack.imgur.com/2fjZI.png" rel="nofollow noreferrer">After</a></p>