How do I right justify the input fields and left justify the labels?
<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt; Contact page &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrapper"&gt;  
        &lt;header&gt;
            &lt;nav&gt;
                  &lt;ul&gt;
                    &lt;li&gt; &lt;a href="index.html"&gt; Index &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="learning_log.html"&gt; Learning Log &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="contact.html"&gt; Contact &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;



&lt;h1&gt; Contact page &lt;/h1&gt;
&lt;form&gt; 
    &lt;fieldset&gt;
        &lt;legend&gt;Contact Information&lt;/legend&gt;
    &lt;p&gt;&lt;label &gt;first_name*: &lt;input type="text" name="first_name*" required&gt;&lt;/label&gt;&lt;/p&gt; 
    &lt;p&gt;&lt;label &gt;last_name*: &lt;input type="text" name="last_name*" required&gt;&lt;/label&gt;&lt;/p&gt;
    &lt;p&gt;&lt;label &gt;phone_number*: &lt;input type="number" name="number*" required&gt;&lt;/label&gt;&lt;/p&gt;    
        &lt;/fieldset&gt;
        &lt;fieldset&gt;
            &lt;legend&gt;Radio&lt;/legend&gt;
 &lt;label &gt;  contact_permission* &lt;/label&gt;&lt;br&gt;
     &lt;input type="radio" name="rating" required value="1 hour"&gt; Yes &lt;br/&gt;
 &lt;input type="radio" name="rating" value="2 hours"&gt; No &lt;br/&gt;  
            &lt;/fieldset&gt;
        &lt;fieldset&gt;
        &lt;legend&gt;Dropdown List&lt;/legend&gt;
        &lt;label&gt;best_time_to_contact*: &lt;/label&gt;
&lt;select required&gt;
 &lt;option value=""&gt;Please Select&lt;/option&gt;
 &lt;option value="1"&gt; Morning&lt;/option&gt;
 &lt;option value="2"&gt; Afternoon&lt;/option&gt;
 &lt;option value="3"&gt; Evening&lt;/option&gt;
&lt;/select&gt;
        &lt;/fieldset&gt;
        &lt;fieldset&gt;
            &lt;legend&gt;Check box&lt;/legend&gt;
        &lt;label &gt; how_can_i_contact_you  &lt;/label&gt;&lt;br&gt;
&lt;input type="checkbox" name="Phone" value="Phone"&gt; Phone&lt;br&gt;
&lt;input type="checkbox" name="Email" value="Email"&gt; Email &lt;br&gt;
        &lt;/fieldset&gt;

  &lt;br&gt;      



        &lt;input type="submit" name="Submit" value="Submit"&gt;
    &lt;/form&gt;
    &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Not quite sure how to go about this, i have tried to do text-align: left and text-align: right within the style section but no changes occur when I add this. I don't know any other way to do it. <a href="https://jsfiddle.net/tyvx60zc/" rel="nofollow">https://jsfiddle.net/tyvx60zc/</a> here is a jsfiddle of the code with my external css. any help would be greatly appreciated </p>