Want to keep button besides the text area

In HTML, I want to align a button besides a text-area like in a messenger:

Both are in the footer, but when I change the screen size, this happens:

<input type="button" value="➢" onclick="CheckAndSubmit ()" style=" position:fixed; bottom:4px;right:100px; padding:15px;">
<textarea name="message" id="message" cols="40" rows="1" style="position:fixed; padding:15px; bottom:4px;"></textarea>

Solution

The easiest way to do it is to use Bootstrap, you can read more about it here; http://getbootstrap.com/.

To use bootstrap, put this in your html -tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

In your HTML code, you can then simply write:

<div class="container">
    <div class="col-md-10">
        // Input field goes here
    </div>
    <div class="col-md-2>
        // Button goes here
    </div>
</div>