Floated elements with responsive width

[RachelR]

I have a demo here - https://codepen.io/anon/pen/VNYwOQ

I have an image(block), heading and a button

I want to display them on one line with the image and text next to each other and the button on the right.

I have this working by floating the imaga and text left and button right.

My problem is when the page gets smaller the text drops below the image but I would like the text to stay were it is and just get narrower.

How can I make the text get narrower but still stay next to the image.

[ronpat]

@RachelR

How can I make the text get narrower but still stay next to the image.

Think in terms of columns maybe? The wrapping text can remain in the center column. How do you envision the long text header looking on a smartphone?

You could create the text on an image and allow the width of the image to become a small bit narrower, maybe. The actual text could be hidden offscreen.

I’m not sure how much text you envision shrinking.

[PaulOB]

Just use flex and no floats:

<div class="wrapper">
  <div class="block"></div>
  <div class="text">
    <h1>Heading Heading Heading Heading Heading Heading</h1>
  </div>
  <div class="button">
    <button>Button</button>
  </div>
</div>

.wrapper{display:flex;}
.block{
  width: 100px;
  height: 100px;
  background: red;
}
.button{margin-left:auto}

The above assumes wrapper is just wrapping those elements otherwise use another wrapper instead.

You would then need media queries for the smaller screen display when the text is too squashed.