Position div at bottom of parent but next to floated sibling

Question

Given the following markup, I'd like to get the buttons to the right of the image, and below the text, but stuck to the bottom of the parent. Typically, this would be accomplished per this answer, but in this case since there is a float, the content ends up on top of the image. Also, absolute positioning seems like it will be a problem since I may eventually end up overlapping the text content as well. For purposes of this question, please assume that the width of the image is unknown, so adding a left margin or padding is not really an option as far as I can see.

I think I will probably have to restructure this or move away from floating the image, but I'd rather not. Is there a simple solution that I've overlooked that can make this work without drastically changing the layout?

.wrapper {
  position: relative;
  overflow: auto;
}

.image {
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  position: absolute;
  bottom: 0;
}

button {
  padding: 10px 25px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

Answer 1

Adding display: inline; in the .stick-to-bottom class.

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline, including SVG elements.

.wrapper {
  border: solid 1px #f00;
  position: relative;
  overflow: auto;
}

.image {
  border: solid 1px #f00;
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  border: solid 1px #f00;
  display: inline;
  position: absolute;
  bottom: 0;
}

button {
  padding: 10px 25px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

A better option could be using: display: inline-block; and margin: 20px 0 0 0;.

.stick-to-bottom {
  border: solid 1px #f00;
  display: inline-block;
  margin: 20px 0 0 0;
}

Something like this:

.wrapper {
  border: solid 1px #f00;
  position: relative;
  overflow: auto;
}

.image {
  border: solid 1px #f00;
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  border: solid 1px #f00;
  display: inline-block;
  margin: 20px 0 0 0;
}

button {
  padding: 10px 25px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
    <br /> Some text...<br /> Some text...<br /> Some text...<br /> Some text...<br /> Some text...
  </div>
</div>

Answer 2

The code snippet below will help with what you want but i do not recommend that structure.

<style>
.wrapper {
  position: relative;
  overflow: auto;
}

.image {
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  right:0;
  text-align: right;
}

button {
  padding: 10px 25px;
  font-size: 16px;
  float: right;
}

</style>

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

instead i recommend having two divs one holding the image floated to the left and another holding the rest of the content floating to the right. The rest of the styles will apply and you wouldn't have to worry about having the buttons go on top of the image