I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.

Here is the JS file :

        var counter = 0;

function create_div(type){
        var dynDiv = document.createElement("div");

             dynDiv.id = "divid_"+counter;
             dynDiv.class="main";
             document.body.appendChild(dynDiv);
             question();
             if(type == 'ADDTEXTBOX'){
                ADDTEXTBOX();
             }

             counter=counter+1;
        }

    function question(){
        var question_div = document.createElement("div");
            question_div.class="question";
            question_div.id = "question_div_"+counter;
            var Question = prompt("Enter The Question here:", "");

            var node=document.createTextNode(Question);
            question_div.appendChild(node);
            var element=document.getElementById("divid_"+counter);   
            element.appendChild(question_div);

        }

    function ADDTEXTBOX(){
            var answer_div = document.createElement("div");
            answer_div.class="answer";
            answer_div.id = "answer_div_"+counter;
            var answer_tag = document.createElement("input");
                    answer_tag.id = "answer_tag_"+counter;
                    answer_tag.setAttribute("type", "text");
                    answer_tag.setAttribute("name", "textbox");
                        answer_div.appendChild(answer_tag);

            var element=document.getElementById("divid_"+counter);
            element.appendChild(answer_div);

        }

Here is the css file :

.question
{
    width: 40%;
    height: auto;
    float: left;
    display: inline-block; 
    text-align: justify;
    word-wrap:break-word;

}
.answer
{
    padding-left:10%;
    width: 40%;
    height: auto;
    float: left;
    overflow: auto;
    word-wrap:break-word;

}
.main
{   
    width: auto;
    background-color:gray;
    height: auto;
    overflow: auto;
    word-wrap:break-word;
}

My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line ? Thank You.

PS : should I stick with the current idea of using div or should I try some other approach ? like tables ?