Question

Okay here is the case.
I have a image with a fixed width and 2 text strings with varible width.

I want the 2 inline-content span’s to stay in their column, but the solutions I’ve came up with didn’t work.

<div class="fluid-container">
  <img class="fixed-width" src="x.png">

  <p class="dynamic-width">
    <span class="inline-content">Some&nbsp;content</span> 
    <span class="inline-content-2">Some&nbsp;content</span>  
  </p>  
</div>

Answer 1

After hours of googling and hacking I found a solution that works in aall major browsers.
Here is the codepen http://codepen.io/lajlev/pen/mzgkw

.slim

.fillout-container
  input.left type="button" value="Filter reviews"
  .fillout
    input type="text" placeholder="Start typing"

.scss

body {
  max-width: 480px;
  margin: 40px auto;
  box-sizing: border-box;
  background: #efefef;
}

// Fillout technique
.left {
  float:left;
}

.fillout-container {
    padding: 20px;  
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

  .fillout {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    padding-left: 10px;

    > input, > div {
      width: 100%;   
      box-sizing: border-box;
    }
  }
}