Salman Salman - 1 month ago 4
CSS Question

Make 2 elements exactly below each other

In the following html code. Currently the label and textarea are in the same row I am trying to put the submit button exactly below the left corner of

textarea
, but it seems that my idea does not work:

<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
</div>
</div>

<div class="form-group col-sm-6" style="float: right;">
<div class="col-sm-4" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>


How should i fix it?

I am using bootstrap

Answer
<div class="form-group">
  <label for="comments" class="col-sm-3 control-label text-right">Comments</label>
  <div class="col-sm-9">
    <textarea id="summernote" th:field="*{comments}" class="summernote "></textarea>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-3 col-sm-9" style="float: left;">
    <input type="submit"  value="Submit The Feedback" class="btn btn-primary" />
  </div>
</div>

Simple!