Align input buttons next to textarea in css - html

Question

I have the above sample html but the button are being placed one line below the textarea. How do ensure that the buttons are placed next to the textarea (on the right side of textarea) but not below?
<div id="txtArea" style="width:1000px;">
<textarea style="margin-left:20px;" class="span1 form-control" rows="6" ></textarea>
</div>
<div id="buttons">
<input id="btnApprove" type="button"name="action" value="Create Profile" onclick="return validateCreateStaffProfile()" class="btn btn-default btn-sm_Custom active" />
<input id="btnReject" type="button" style="margin-left: 30px;" class="btn btn-default btn-sm_Custom active" value="Clear" onclick="return ClearStaffProfileActionDiv();" />
<input id="btnDelete" type="button" name="action" value="Create Profile" onclick="return validateCreateStaffProfile()" class="btn btn-default btn-sm_Custom active" />
</div>

Answer 1

You can use inline-block property
#txtArea,#buttons{
display:inline-block;
vertical-align: top;
}
<div id="txtArea" >
<textarea style="margin-left:20px;" class="span1 form-control" rows="6" ></textarea>
</div>
<div id="buttons">
<input id="btnApprove" type="button"name="action" value="Create Profile" onclick="return validateCreateStaffProfile()" class="btn btn-default btn-sm_Custom active" />
<input id="btnReject" type="button" style="margin-left: 30px;" class="btn btn-default btn-sm_Custom active" value="Clear" onclick="return ClearStaffProfileActionDiv();" />
<input id="btnDelete" type="button" name="action" value="Create Profile" onclick="return validateCreateStaffProfile()" class="btn btn-default btn-sm_Custom active" />
</div>

Answer 2

You need to remove the style width: 1000px and wrap the content into a div with display: inline-flex.
.content {
display: inline-flex;
}
<div class="content">
<div id="txtArea" >
<textarea style="margin-left:20px;" class="span1 form-control" rows="6" >
</textarea>
</div>
<div id="buttons">
<input id="btnApprove" type="button"name="action" value="Create Profile" onclick="return validateCreateStaffProfile()" class="btn btn-default btn-sm_Custom active" />
<input id="btnReject" type="button" style="margin-left: 30px;" class="btn btn-default btn-sm_Custom active" value="Clear" onclick="return ClearStaffProfileActionDiv();" />
<input id="btnDelete" type="button" name="action" value="Create Profile" onclick="return validateCreateStaffProfile()" class="btn btn-default btn-sm_Custom active" />
</div>
</div>

Answer 3

If you're using bootstrap why not just column them?
<div class="container">
<form action="">
<div class="col-lg-9">
<div class="row">
<textarea name="" class="form-control" id=""rows="10"></textarea>
</div>
</div>
<div class="col-lg-3">
<input type="submit" class="btn btn-primary" onclick="return validateCreateStaffProfile()" value="Create Profile">
<input type="submit" class="btn btn-primary" value="Clear">
<input type="submit" class="btn btn-primary" onclick="return validateCreateStaffProfile()" value="Create Profile">
</div>
</form>
</div>
This will align the buttons to the right of the texarea and side by side.