Textarea with button on same line - css

Question

This code:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Results in this:
I had to add the following CSS to get the buttons to sit on the bottom and not float in the middle, and I wonder if this has something to do with it:
.row {
position: relative;
}
.button {
position: absolute;
bottom:0;
right:0;
}

Answer 1

I suggest that you use Flexbox with media queries instead of absolute positioning. DEMO
#media(min-width: 768px) {
.row.flex {
display: flex;
align-items: flex-end;
}
}

Answer 2

<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<div class="clear"></div>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
and the new code for class clear is:
.clear {clear: both;}
Now the button will always placed at bottom not float in middle.

Answer 3

If i m correct you want the save button next to textarea.
Having a class="form-control"on textarea will make it take the whole width.
Removing the class the code is as below :
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Now the Save Button will be placed exactly next textarea . You can use margin and padding to position it properly the way u like.
EDIT for aligned buttons:
<div class="row">
<div class="col-sm-2">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-default" style="margin-left:-30px;">Save</button>
</div>
<div class="col-sm-8 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>