如何为此input对齐以下form元素，使它们类似于表格，标题位于顶行，input框位于底行，因此每个label位于相应的input框上方，表单左下角的箭头button以及plus和save按钮位于右下角？另外，它可以优雅地调整到不同的屏幕尺寸？
<body>
<!-- Title & logo -->
<div id="header">
<h1><i class="fa fa-book"></i> loGym</h1>
</div>
<!-- Main body of page -->
<main role=”main”>
<div id="description">
<p>Fill in your workout and then click <i>Save Workout</i> when you are done.</p>
<p>To add and extra column for reps and kg's, click the <i class="fa fa-plus-circle"></i> sign on your screen.</p>
<p>To add and extra row, click the <i class="fa fa-arrow-circle-down"></i> sign on your screen.</p>
</div>
<div id="workouts">
<form id="workout-form">
<label for="exercise" class="labels">Exercise</label><input type="text" id="exercise" placeholder="Which exercise?" autofocus />
<label for="musclegroup" class="labels">Muscle-Group</label><input type="text" id="musclegroup" placeholder="Which muscle-group?" />
<div id="sets">
<label for="reps" class="labels">Reps</label><input type="text" id="reps" class="reps-column" placeholder="How many reps?" />
<label for="kilos" class="labels">Kg's</label><input type="text" id="kilos" class="kilos-column" placeholder="How much Kg?" />
</div>
<button id="add-column"class="add-buttons" type="button"><i class="fa fa-plus-circle fa-2x"></i></button>
<button id="add-row" class="add-buttons" type="button"><i class="fa fa-arrow-circle-down fa-2x"></i></button>
<button id="submit-workout" type="submit" name="submitbutton"><strong>Save Workout</strong></button>
</form>
</div>
</main>
</body>
我尝试使用float: left和clear并更改了他们的position和display，但他们不断重叠或不在线。