Can anyone help me achieve this design using Vue framework and postcss preprocessor? I attempted a solution involving a contenteditable span as suggested here, but the button isn't floated properly, causing the text to hide underneath it as if it has absolute positioning:
<div class="feedback__textarea">
<app-btn theme="deepwater" class="feedback__btn">Send</app-btn>
<span contenteditable="true"
class="feedback__input"
id="feedback-form-message"
name="message"></span>
</div>
.feedback__textarea {
position: relative;
height: 150px;
background-color: var(--white);
}
.feedback__textarea .feedback__input {
position: relative;
top: -60px;
display: inline-flex;
width: 100%;
height: 150px;
color: var(--dark-grey);
word-break: break-all;
&:focus {
outline: none;
}
}
.feedback__btn {
float: right;
position: relative;
top: 90px;
}