mixin subscribe-form(spec)
  -
    spec = Object.assign({
      inSidebar: false,
    }, spec)
  form.subscribe-form(class=spec.inSidebar ? 'subscribe-form--in-sidebar' : '')
    input.subscribe-form__input(type='email' title="Email" placeholder="Email" class=spec.inSidebar ? 'subscribe-form__input--in-sidebar' : '')
    +button(class=`subscribe-form__submit ${spec.inSidebar ? 'subscribe-form__submit--in-sidebar' : ''}`): | Subscribe

mixin button
  button.button&attributes(attributes)
    block

mixin sidebar
  .sidebar&attributes(attributes)
    +subscribe-form({inSidebar: true})

.site-container
  .main
  +sidebar(class="site-container__sidebar")
View Compiled 
.site-container {
  display: grid;
  //IE doesn't support grid-gap
  grid-template-columns: 1fr 10px 300px;
  
  &__sidebar {
    grid-column: 3;
  }
}

.main {
  border: 1px dotted green;
}

/* 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;
  
  &--in-sidebar {
    display: block;
  }
  
  &__input {
    border: 1px solid #000;
    padding: 10px;
    
    &--in-sidebar {
      display: block;
      width: 100%;
      margin-bottom: 10px;
    }
  }
  
  &__submit {
    grid-column: 3;

    &--in-sidebar {
      width: 100%;
    }
  }
}

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

* {
  box-sizing: border-box;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.