Making a Button and Textbox The Same Height Next to Each Other

Making a button and textbox the same height next to each other

One simple fix is to modify the following CSS rule:

#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}

Adding vertical-align: top takes care of the baseline alignment.

See demo at: http://jsfiddle.net/audetwebdesign/EmAnr/

Footnote:

To add the left border on the button element, remember to add the border styling,
which can be done as follows:

#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}

how to make text input and button the same height when assigning the text input fixed font-size?

Flexbox can do that:

* {  padding: 0;  margin: 0;  box-sizing: border-box;}form {  position: fixed;  bottom: 0;  left: 0;  right: 0;  display: flex;}form input {  width: 90%;  font-size: 50px;}form button {  width: 9%;}

<form>  <input id="m" type="text">  <button>POST</button></form>

textarea and submit button same height and same line

By using a combination of the box-model and display: flex.
Both elements are now on the same line and are the same height, as you asked :)

* {  box-sizing: border-box;}
form { display: flex;}
textarea {  display: inline-block;  width: 90%;  resize: none;}
#submit {  display: inline-block;  width: 10%;}

<form>  <textarea cols="30" rows="1" placeholder="Text here"></textarea><input id="submit" type="submit" value="Send"></form>

How to align a Material UI Button and TextField on the same line, at same height?

Given that you have each of your element in a <Grid> component themselves, this should work:

https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx

Match button size with adjacent input box

If you are using bootstrap, you can achieve this using input-group, please see: Bootstrap 4 input groups

<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">  <input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">  <div class="input-group-append">    <button class="btn btn-outline-secondary" type="button">+</button>  </div></div>

Place a Button next to a TextBox total 100% width

form { display: flex; }input[type=text] { flex-grow: 1; }

<form>  <input type="text">  <input type="button" value="Button text"></form>

CSS How to make the span same height as input?

Flexbox will do that by default.

.GroupSearch {  text-align: center;  display: flex;}
.GroupSearch__input {  width: 500px;  padding: 10px 10px;}
.GroupSearch__search-btn {  background-color: lightblue;  color: white;  display: flex;  align-items: center;}

<div class="GroupSearch">  <input class="GroupSearch__input" type="text" placeholder="Enter Your Group Name" />  <span class="GroupSearch__search-btn">Search</span></div>

Making a Button and Textbox The Same Height Next to Each Other