Multiple lines of text divs, last line needs to move down based on content

[daynnightdesigns]

I have multiple lines of text inside a caption, including button text and nutrition text. The nutrition text is in the last line (div) and I need it to move up or down based on how much text is generated by the button text. The button text could possibly generate 1, 2, or 3 lines of text and I want the nutrition to move up or down based on many lines of text are above it, without me having to move it with margins, top, or bottom. Right now, the nutrition text gets overlapped by the button text. I’ve tried positioning, white-space, clear, etc., but nothing worked unless I’m doing it wrong? The price and description divs do not have content.

Here’s how the html is set up:

<div id="caption">
       <div class="button-text">...</div>
       <div class="button-price"></div>
       <div class="description-text"></div>
       <div class="nutrition-text">...</div>
</div>

Here’s some of the CSS:

.caption {
  display: table;
  position: absolute;
  width: 100%;
  height: 45px;
  background-color: transparent;
  margin-top: 155px;
}

.button-text {
  color: #231f20;
  background-color: transparent;
  display: table-cell;
  text-align: center;
  font-family: "trebucbd", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
  vertical-align: top;
}

.nutrition-text {
  color: #000;
  width: 100%;
  height: auto;
  font-size: 14px;
  position: absolute;
  top: 25px;
  left: 0;
  vertical-align: text-top;
  clear: both;
}

[Author]

Posts