How do I align text boxes under each other in CSS/HTML

Question

I want to know how to place these textboxes under another so .textbox is at the top and then textbox1 is below.

CSS

.textbox { 
    border: 1px solid #848484; 
    -moz-border-radius-topleft: 30px;
    -webkit-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
    -moz-border-radius-topright: 30px;
    -webkit-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    border: 1px solid #848484;
    outline:0; 
    height:25px; 
    width: 275px; 
    padding-left:20px; 
    padding-right:20px;
} 

.textbox1 { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 275px; 
} 

HTML

<input class="textbox" type="text"> 
<input class="textbox1" type="text">

Answer 1

I'd suggest adding:

input {
    display: block;
    box-sizing: border-box;
}

JS Fiddle demo.

The display: block forces each of the input elements to fully occupy its own 'line', whereas the box-sizing forces the browser to include the border-width and padding in the calculation of the width of the element (so that their widths match).

References:

• box-sizing.