JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">    
    
    <div class="lecture">
        <form>
            
            <div class="lectureName">
                <p>name lecture:</p>
                <input type="text" value="lecture 1"/>
            </div>
            
            <div class="questions">
                
                <div class="question">
                    <p>question:</p>
                    <input type="text" value="question 1?"/>
                    
                    <div class="answers">
                        <p>answers</p>
                        <table>
                            <tr>
                                <td><input type="text" value="answer 1"/></td>
                                <td><input type="button" value="remove" class="remove"/></td>
                                
                            </tr>
                            <tr>
                                <td><input type="text" value="answer 2"/></td>
                                <td><input type="button" value="remove" class="remove"/></td>
                            </tr>        
                            
                        </table>
                        
                        <input type="button" value="add answer"/>
                    </div> <!-- ./answer -->
                </div>    <!-- ./question -->   
                
                <input type="button" value="add question"/>
                
                
            </div> <!-- ./questions -->
            
            <input type="submit" value="update" />
            
        </form>
        
    </div> <!-- ./lecture -->
    
</div> <!-- ./container -->

CSS

body {
    font-family: sans-serif;
    margin: 0;
}


#container {
    width: 640px;
    min-height: 200px;
    margin: 0 auto; /* why doesnt this center the div? */
}

.lecture {
    background: rgba(180, 180, 180, 1);
    margin-bottom: 10px;
}

.lecture div {
    padding: 10px;
}

.lectureName {
    background-color: rgba(50, 50, 50, 1);  
    color: white;
    padding-top: 10px;
}

.questions {
}

.question {
   margin-top: 0px;
   margin-bottom: 10px;
   background: rgba(200, 200, 200, 1); 
}

.answers {
   background: rgba(225, 225, 225, 1);
}

input {
    border: 0;
    height: 15px;
    padding: 10px;
    box-sizing: content-box;
    margin: 0;
    margin-bottom: 10px;
    /* width: 90%; */
}

input[type="text"] {
    width: 400px;
}

input[type="submit"] {
    margin-left: 10px;
}


.remove {
    background-color: red;
    color: white;
}

JavaScript

// make a extra question
$(".questions").prepend($(".question").clone());

// extra lecture
$("#container").append($("#container").html());