Generated by SassMeister.com.

SassMeister-input-HTML.haml

%h3 Hover inner texts for debugging:

%p
  Some text.
  %span.container-1
    %span.child Inner text 1.
    %span.child Inner text 2.
  Some text.

%p
  Some text.
  %span.container-1
    %span.child Inner text 1.
    %span.child
      %input(type='text' placeholder='Placeholder text')
    %span.child Inner text 2.
  Some text.

%p
  Some text.
  %span.container-2
    %span.child Inner text 1.
    %span.child Inner text 2.
  Some text.

%p
  Some text.
  %span.container-2
    %span.child Inner text 1.
    %span.child
      %input(type='text' placeholder='Placeholder text')
    %span.child Inner text 2.
  Some text.

%p
  %a(href='http://www.brunildo.org/test/inline-block.html')
    Some more information for working with <code>display: inline-block</code>.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$height: 50px;

.container {
  line-height: $height;
  height: $height;
  display: inline-block;
  vertical-align: middle;
}

// Well suited for pixel-perfect alignment

.container-1 {
  @extend .container;
  .child {
    float: left;
  }
}

// Well suited for text-like flow

.container-2 {
  @extend .container;
  .child {
    display: inline-block;
    height: $height;
    line-height: $height;
  }
}

// Debugging colors

.container-1, .container-2 {
  background-color: pink;
}
.container-1:hover, .container-2:hover {
  .child {
    background-color: rgba(255, 255, 255, 0.5);
    //opacity: 0.5;
  }
}

SassMeister-output.css

.container, .container-1, .container-2 {
  line-height: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
}

.container-1 .child {
  float: left;
}

.container-2 .child {
  display: inline-block;
  height: 50px;
  line-height: 50px;
}

.container-1, .container-2 {
  background-color: pink;
}

.container-1:hover .child, .container-2:hover .child {
  background-color: rgba(255, 255, 255, 0.5);
}

SassMeister-rendered.html

<h3>Hover inner texts for debugging:</h3>
<p>
  Some text.
  <span class='container-1'>
    <span class='child'>Inner text 1.</span>
    <span class='child'>Inner text 2.</span>
  </span>
  Some text.
</p>
<p>
  Some text.
  <span class='container-1'>
    <span class='child'>Inner text 1.</span>
    <span class='child'>
      <input placeholder='Placeholder text' type='text'>
    </span>
    <span class='child'>Inner text 2.</span>
  </span>
  Some text.
</p>
<p>
  Some text.
  <span class='container-2'>
    <span class='child'>Inner text 1.</span>
    <span class='child'>Inner text 2.</span>
  </span>
  Some text.
</p>
<p>
  Some text.
  <span class='container-2'>
    <span class='child'>Inner text 1.</span>
    <span class='child'>
      <input placeholder='Placeholder text' type='text'>
    </span>
    <span class='child'>Inner text 2.</span>
  </span>
  Some text.
</p>
<p>
  <a href='http://www.brunildo.org/test/inline-block.html'>
    Some more information for working with <code>display: inline-block</code>.
  </a>
</p>