I want the input box and the send button box to be beside each other in the flex row, with the input taking 90% of the width. However, the send button is wrapping under the input and I'm not sure why.
.chatFooter { /* footer */ width: 100%; display: flex; flex-flow: row wrap; justify-content: space-around; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box;}.chatInput { height: 100%; width: 90%; outline: none; resize: none; font-size: 1em; font-family: inherit; background-color: white;}.chatSendBtn { height: 100%; width: 10%; font-size: 1.3em; background-color: white; color: black; cursor: pointer;}.chatSendBtn:hover { color: red;}<div class="chatFooter"><textarea class="chatInput" placeholder="Enter message"></textarea><div class="chatSendBtn"> Send</div></div>edit: I added borders on my elements in the initial question so it was easier to see what was happening, but the original issue of the wrapping button exists without any buttons, I've removed the borders.