title: css - align label & textbox at right side of page
body: <p>I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.</p>
  
  <p>I have tried using <code>float:right</code> property but it doesn't seem to work</p>
  
  <p>In fiddle example it is not in single line.</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>    .row {
          margin: 10px;
      }
  
      .elements {
          padding: 10px;
          margin-left: 50px;
          margin-top: 10px;
          border-bottom: ridge;
          border-bottom-color: #1f6a9a;
          padding-left: 0;
      }
  
      .field {
          font-size: 15px;
          color: #b6d6ed;
      }
  
      label {
          display: inline-block;
      }
  
      input {
          background-color: transparent;
          border: 0px solid;
          height: 25px;
          width: 60px;
          color: #b6d6ed;
          text-align: center;
      }
      
      /* I Tried Below Line to Right Align */
      
      .row &gt; .elements:nth-child(2) {
          float:right;   
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="row"&gt;
          &lt;span class="elements"&gt;
              &lt;label class="field" for="Title"&gt;Title&lt;/label&gt;
              &lt;input id="Title" name="Title" type="text"&gt;
          &lt;/span&gt;
          &lt;span class="elements"&gt;
              &lt;label class="field" for="DateOfBirth"&gt;Date of Birth&lt;/label&gt;
              &lt;input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker"&gt;
          &lt;/span&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/Wn5s2/" rel="nofollow noreferrer">jsfiddle</a></p>