CSS - Exact Same Height and Alignment of Button and Input Text Box

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;
}

Make form button/text field same height in all browsers?

change:

*{
    line-height: normal !important;
}

or add something like:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

don't ask why)

and. safari need special fixes. but looks well

Equal height text boxes and buttons

Here's a cross-browser solution:

<!doctype html>
<html lang="en">
    <head>
       <style>
            html, body{
                padding: 50px;
            }
            .inputWrapper{
                display:inline-block;
                font-size:16px;
                padding:0px;
                border:1px solid #000000;
                border-radius:6px;
                background-color:#ffffff;
            }
            .email{
                margin:0px;
                margin-left:1px;
                padding:5px;
                border-width:0px;
                border-radius: 6px 0px 0px 6px;
            }
            .submit{
                margin: -1px;
                margin-left: -5px;
                padding: 6px;
                border-width:0px;
                border-radius: 0px 6px 6px 0px;
                color:#ffffff;
                background-color:#D94E35;
            }
        </style>
    </head>
    <body>
        <div class="inputWrapper">
            <input class="email" type="email" value="" placeholder="email address"/>
            <input class="submit" type="submit" value="Subscribe" />
        </div>
    </body>
</html>

You can see it working here: http://dabblet.com/gist/1604595

Eliminate gap between input text and button css, and put on same height

What about using the float property to help?

input[type="text"] {  height: 50px;  width: 400px;  -moz-border-radius-bottomleft: 5px;  -moz-border-radius-topleft: 5px;  -webkit-border-bottom-left-radius: 5px;  -webkit-border-top-left-radius: 5px;  background-color: #e60000;  border: none;  float: left;  padding: 0 1em;}input[type="button"] {  height: 50px;  width: 50px;  float: left;  background-color: #ccc;  border: none;  -moz-border-radius-bottomright: 5px;  -moz-border-radius-topright: 5px;  -webkit-border-bottom-right-radius: 5px;  -webkit-border-top-right-radius: 5px;}#username_form {  width: 100%;  margin: auto;  overflow: hidden;}

<form id="username_form">  <input id="username_entry" type="text" name="username" placeholder="Enter Username Here" />  <input type="button" value="Save" onClick="save()"></form>

TextBox and Button are not aligning in one line with equal space

How about something like this:

<span id="protocol">
  <span class="label_align">Protocol:</span>
  <select size="1" id="protocols_select">
    <option value="file">file</option>
    <option value="hdfs">hdfs</option>
  </select>
  <button id="open_file_button" class="btn">Open</button>
</span>

<span id="url">
  <span class="label_align">URL: </span>
  <input type="text" id="url_text"></input>
  <ReactFileReader 
    multipleFiles={false}
    fileTypes={[".csv"]} 
    handleFiles={this.handleFiles}
  >
    <button id="browse_btn" class="btn">Browse</button>
  </ReactFileReader>
</span>

.label_align{
  font-size: 15px;
  margin-right: 10px;
  height: 18px;
  vertical-align: middle;
}

.btn{
  background-color: #0097A7;
  color: white;
  border: none;
  margin-left: 10px;
  height: 18px;
}

#protocols_select{
  width:70px;
  font-size: 10px;
  height: 18px;
  vertical-align: middle;
}

#url{
  margin-left: 20px;
}

#url_text{
  width: 80px;
  height: 18px;
  border: 1px solid #999;
}

See it in action here: https://jsbin.com/wukojuxewe/1/edit?html,css,output

Note that I only tested on Chrome on macOS, so additional tweaks may be needed. Also, if you use inline elements (like <span>) instead of block elements (like <div>), you don't have to deal with floating everything.

How to align buttons at the same height in CSS grid

You can solve it in many ways but I think the simplest one will be to add the following to your css file:

.project_cards-grid-item {
  display: flex;
  flex-direction: column;
}

.viewProjectBtnContainer {
  margin-top: auto;
}

Input and button not aligned horizontally

If you change

<p>Sign up</p>

<div>Sign up</div>

Or just

Sign up

It should work.

There's a bunch of margin settings on the <p> element that are overflowing and messing up your alignment.