How to align button to the right of this textarea - html

Question

I have a website that uses Bootstrap 4. In my design the contact form looks like this:
But in my actual website it looks like this:
I've tried using floats and i've also tried creating rows and columns to get them to align correctly but nothing works.
footer input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
display: inline-block;
}
footer button.btn {
display: flex;
justify-self: flex-end;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}
<div class="col-md">
<form action="" method="post">
<div class="row">
<label for="name">Nombre</label>
<input type="text" name="name">
<label for="email">Email</label>
<input type="text" name="email"><br>
<div class="form-group row">
<label for="message">Asunto</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
<button type="submit" class="btn btn-info">Enviar</button>
</div>
</div>
</form>
</div>
All of my code: https://codepen.io/Wibblefish/pen/ZVEdqz
Thank you.

Answer 1

You can try making use of bootstrap's flexbox utilities :)
input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
}
footer button.btn {
display: flex;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container p-5 d-flex justify-content-center align-items-center"
<form>
<div class=" d-flex justify-content-center align-items-center flex-column">
<div class="form-group align-self-start">
<label for="name" class="mx-1">Nombre</label>
<input type="text" name="name">
</div>
<div class="form-group align-self-start">
<label for="email" class="mx-3">Email</label>
<input type="text" name="email">
</div>
<div class="form-group d-flex justify-content-center">
<label for="message" class="mx-2">Asunto</label>
<textarea name="message" class="mx-2" id="" cols="30" rows="10"></textarea>
<button type="submit" class="btn btn-info align-self-end mx-2">Enviar</button>
</div>
</div>
</form>
</div>
Also, here's a working example :)

Answer 2

Please place your button in out side the form-group div
footer input, textarea {
background: #fff;
border: none;
-webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.16);
border-radius: 15px;
display: inline-block;
}
footer button.btn {
display: flex;
justify-self: flex-end;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
}
<div class="col-md">
<form action="" method="post">
<div class="row">
<label for="name">Nombre</label>
<input type="text" name="name">
<label for="email">Email</label>
<input type="text" name="email"><br>
<div class="form-group row">
<label for="message">Asunto</label>
<textarea name="message" id="" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-info">Enviar</button>
</div>
</form>
</div>

Answer 3

Instead of using custom CSS for alignment and spacing, read the docs and utilize Bootstrap.
<form action="" method="post">
<div class="form-row mb-2">
<label for="name" class="col-md-3 text-right">Nombre</label>
<input type="text" name="name" class="col-md-7 form-control">
</div>
<div class="form-row mb-2">
<label for="email" class="col-md-3 text-right">Email</label>
<input type="text" name="email" class="col-md-7 form-control">
</div>
<div class="form-row mb-2">
<label for="message" class="col-md-3 text-right">Asunto</label>
<textarea name="message" id="" cols="30" rows="10" class="col-md-7 form-control"></textarea>
<button type="submit" class="btn btn-info col-md-2 align-self-end">Enviar</button>
</div>
</form>
Demo: https://www.codeply.com/go/nJ0HHdEB1V
With this method you want need all the extra CSS.