form.subscribe-form
input.subscribe-form__input(type='email' title="Email" placeholder="Email")
button.button Subscribe
View Compiled
/* subscribe-form component file */
.subscribe-form {
display: grid;
//Can't use grid-gap due to IE11 support
grid-template-columns: 1fr 10px auto;
border: 1px dotted #000;
padding: 10px;
&__input {
border: 1px solid #000;
padding: 10px;
}
}
/* button component file */
.button {
/* styles that we want to appear on every button by default */
padding: 10px;
background: darkgreen;
color: #fff;
border: 0;
text-decoration: none;
text-align: center;
display: inline-block;
/*
We want the button to go in the third column right?
*/
grid-column: 3;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.