HTML/CSS form alignment with buttons and text area -

i'm trying achieve following layout i'm having trouble doing in html , not sure correct way implement (i assume css case maybe doing in plain html better/simpler) :

[-nameinput-] |-----------------------------------textarea-----------------------------------]
[-phoneinput-] |-----------------------------------textarea-----------------------------------]
[submit]
[-emailinput- ] |-----------------------------------textarea-----------------------------------]

where [ ] brackets represent button , | | represent 1 text area. far i'm kinda confused websites doing kind of stuff table tag, , other block-align in css. input on this?

to start with, if seeing source code tables used lay out page elements, leave site immediately. not go back. prehistoric dinosaur , on verge of extinction. wouldn't want go extinct it.

secondly, using css lay out form quite easy , mobile-friendly well.

<form> <div class="input-wrapper">     <label for="name">name:</label>     <input id="name" type="text" placeholder="name"> </div> <div class="input-wrapper">     <label for="phone">phone:</label>     <input id="phone" type="text" placeholder="phone"> </div> <div class="input-wrapper">     <label for="email">email:</label>     <input id="email" type="email" placeholder="email address"> </div> 

.input-wrapper {     width:100%;     clear:both;     padding:1em 0; } label {     display:inline-block;     float:left;     text-align:right;     margin-right:1em; } input {     display:block;     float:left; } 

here basic fiddle. https://jsfiddle.net/maguijo/j571a7j0/

this form aligned on wider screens , go stacked on smaller screens. boom. done.