Я хочу разместить кнопку «Ответить» рядом с текстовой областью с соотношением сторон 9/1.Я пытался плавать текстовую область влево и кнопку вправо, но я просто не могу сделать это правильно.Кнопка либо находится под текстовой областью, либо становится слишком большой.
С этим связано то, что я не хочу изменять размер кнопки.Я хочу сохранить его в том же размере и изменить ширину текстовой области на основе оставшегося пространства, заполненного кнопкой при изменении размера окна.
В настоящее время я придумал это, но это мусор, потому что создание кнопки 10% сузит его при изменении размера окна.Что я могу сделать, чтобы кнопка была одинакового размера (НО НЕ ФИКСИРОВАННЫЙ РАЗМЕР) и изменила размер текстовой области?
.group-reply {
box-sizing: border-box;
}
.group-reply textarea {
width: 90% !important;
}
.group-reply button {
width: 10%;
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="input-group col-xs-12 col-sm-6 col-sm-offset-6 btm20 group-reply">
<textarea auto-resize ng-model="vm.model.textarea" name="reply" class="form-control"></textarea>
<button type="button" class="btn btn-primary btn-reply">Reply</button>
</div>
</body>
</html>
@ edit Желаемый конечный эффект
