This looks like an issue with margin collapse between parent and child.
The margin on div.input-box collapses with div.block.
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
See Mastering margin collapsing @ MDN.
Here's a diagram to help demonstrate.
Notice how the margins for .input-box go outside of .block.
One solution is to assign an overflow value other than the default visible to the parent element:
.block {
overflow: auto;
}
button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
height: 50px;
}
.flex-float-left {
float: left;
}
.flex-float-right {
float: right;
}
.flex-span {
overflow: hidden;
}
.input-box,
.element-box {
position: relative;
margin: 25px;
vertical-align: top;
line-height: 1em;
}
#search,
#name,
#email,
#phone,
#address {
width: 100%;
display: block;
padding: 0 25px;
box-sizing: border-box;
}
#email-box {
width: 50%;
}
#notes-box {
clear: both;
}
#create {
width: 50px;
}
<div class="block">
<div class="element-box flex-float-right">
<button class="j2 round tomato-brush chalk-stroke" id="create">+</button>
</div>
<div class="input-box flex-span" id="search-box">
<input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
</div>
</div>
Other solutions include:
padding
.block {
padding: 0.1px;
}
button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
height: 50px;
}
.flex-float-left {
float: left;
}
.flex-float-right {
float: right;
}
.flex-span {
overflow: hidden;
}
.input-box,
.element-box {
position: relative;
margin: 25px;
vertical-align: top;
line-height: 1em;
}
#search,
#name,
#email,
#phone,
#address {
width: 100%;
display: block;
padding: 0 25px;
box-sizing: border-box;
}
#email-box {
width: 50%;
}
#notes-box {
clear: both;
}
#create {
width: 50px;
}
<div class="block">
<div class="element-box flex-float-right">
<button class="j2 round tomato-brush chalk-stroke" id="create">+</button>
</div>
<div class="input-box flex-span" id="search-box">
<input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
</div>
</div>
border
.block {
border: 0.1px solid transparent;
}
button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
height: 50px;
}
.flex-float-left {
float: left;
}
.flex-float-right {
float: right;
}
.flex-span {
overflow: hidden;
}
.input-box,
.element-box {
position: relative;
margin: 25px;
vertical-align: top;
line-height: 1em;
}
#search,
#name,
#email,
#phone,
#address {
width: 100%;
display: block;
padding: 0 25px;
box-sizing: border-box;
}
#email-box {
width: 50%;
}
#notes-box {
clear: both;
}
#create {
width: 50px;
}
<div class="block">
<div class="element-box flex-float-right">
<button class="j2 round tomato-brush chalk-stroke" id="create">+</button>
</div>
<div class="input-box flex-span" id="search-box">
<input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
</div>
</div>
display:inline-block
.block {
display: inline-block;
width: 100%;
}
button.j2,
input[type=text].j2,
input[type=password].j2,
input[type=submit].j2 {
height: 50px;
}
.flex-float-left {
float: left;
}
.flex-float-right {
float: right;
}
.flex-span {
overflow: hidden;
}
.input-box,
.element-box {
position: relative;
margin: 25px;
vertical-align: top;
line-height: 1em;
}
#search,
#name,
#email,
#phone,
#address {
width: 100%;
display: block;
padding: 0 25px;
box-sizing: border-box;
}
#email-box {
width: 50%;
}
#notes-box {
clear: both;
}
#create {
width: 50px;
}
<div class="block">
<div class="element-box flex-float-right">
<button class="j2 round tomato-brush chalk-stroke" id="create">+</button>
</div>
<div class="input-box flex-span" id="search-box">
<input class="j2 round-ends" type="text" name="search" id="search" placeholder="Search..." />
</div>
</div>
For reference, also see:
How to disable margin-collapsing?
Margin on child element moves parent element
What You Should Know About Collapsing Margins @ CSS-Tricks
