Aligning Dynamic Inputs
<p>I'm trying to align dynamically created divs but I think I'm missing something fundamental.</p>

<p>I'm just trying to have a little space in between each input, but I don't understand how to target what is going to be the newly created element in the css.</p>

<p>Any help would be appreciated.  Essentially I am just trying to line them up beneath each other, but I'd like to be able to manipulate this to eventually mix with other css.</p>

<p>Link: <a href="http://codepen.io/theodore_steiner/pen/mArAGv" rel="nofollow">http://codepen.io/theodore_steiner/pen/mArAGv</a></p>

<pre><code>HTML:

&lt;div id="fullName"&gt;
&lt;p&gt;Full Name&lt;/p&gt;

&lt;input type="text" name="firstName_1"  /&gt;

&lt;input type="text" name="middleName_1" /&gt;   

    &lt;input type="text" name="lastName_1" /&gt;

&lt;/div&gt;

&lt;input type="button" id="myButton" onclick="addName()" value="+" /&gt;

CSS:

*
{
    margin: 0;
    padding: 0;
}

p
{
    float: left;
    margin-right: 30px;
}

input
{
    margin-right: 10px;
    margin-bottom: 10px;
}

#fullName
{
    margin-left: 30px;
}

JS:
var i = 0;

function addName()
{
    if(i &lt;= 3)
    {
        var div = document.createElement("div");
        div.innerHTML = '&lt;input type="text" name="firstName_'+i+'"&gt;&lt;input type="text" name="middleName_'+i+'"&gt;&lt;input type="text" name="lastName_'+i+'"&gt;';

        document.getElementById("fullName").appendChild(div);
    }
};
</code></pre>