title: Img in full height plus multi line text together in one line using inline-block?
body: <p>I am curious how to set-up this markup using only inline-block property(i got it working with flex in 10secs, but still wanna know);</p>
  <p><a href="https://codepen.io/antongrekov/pen/BajmryQ" rel="nofollow noreferrer">https://codepen.io/antongrekov/pen/BajmryQ</a></p>
  <p>Here is a pen:</p>
  <pre><code>.wrapper
      img(src=&quot;https://logomaster.ai/static/media/gallery002.936afb9d.png&quot;)
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus commodi fuga illo cumque perspiciatis optio quod tot423am quibusdam architecto ea?Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus commodi fuga illo cumque perspiciatis optio quod totam quibusdam architecto ea?
  
  .wrapper
      background: #333
      border: 1px dashed gray
      max-width: 500px
  img 
      display: inline-block
      width: 150px
      margin-right: 1rem
      vertical-align: middle
  p
      display: inline-block
      width: 60%
      vertical-align: middle
  </code></pre>
  <p>Requirements are that img always <strong>full height</strong> of parent container, so that text doesn't go under img. Img and text are always in some same height boxes, if text is to large it grows in lines enlarging height. Img is fixed width(let it be 150px), paragraph takes rest space. If you go to mobile view and reduce width at some point there won't be enough space for img and p altogether so as any regular inline element it will wrap to next line. What i want is at this poing paragraph will increase in height staying same line with img and img will be full height preventing text under.</p>
  <p>I tried applying <em>white-space: nowrap</em> to parent container and <em>white-space: normal</em> to b3, but that results in text cropping. Somewhy text won't grow multiline, i guess may be cuz of inline-block property.</p>
  <p>How do you solve this using only inline-block or inline display property.</p>