Flexslider vertical aligment to bottom

Question

How to set the vertical alignment of a text within the flexslider to the bottom, just above the page control elements?

See the example in the picture.

It should be possible to set the inner <div> to:

position: absolute;
bottom: 0;

But that doesn't work as the <li>...</li> entry has not the full height. As the text length is dynamic there will by different heights and therefore the text should be always oriented to the bottom towards the page control.

The result should look like that:

---

Here a working code example:

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: false
  });
});

.flexslider {
    width: 500px;
}

.flexslider ul, .flexslider ol {
    margin: 0;
    padding: 0;
}

blockquote, q {
    font-size: 14px;
    quotes: "»" "«" "›" "‹";
}

p.quoted {
    font-size: 11px;
}

.flex-control-paging li {
    float: left;
    margin: 2px 4px 2px 0;
}

.flex-control-paging {
    box-sizing: border-box;
    float: left;
    list-style: outside none none;
    margin: -24px 0 0;
    position: relative;
    width: 100%;
    z-index: 3;
}

.flex-control-paging a::before {
    background-color: #b2b2b2;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 15px;
    width: 60px;
}

.flex-control-paging a {
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 30px;
    position: relative;
    text-indent: -999em;
    width: 62px;
}

.flex-control-paging .flex-active::before, .flex-control-paging .flex-active:hover::before {
    background-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/woothemes/FlexSlider/master/jquery.flexslider-min.js" type="text/javascript"></script>
<div class="flexslider">
  <ul class="slides">
    <li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
    <li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</q> <p class="quoted">Lorem ipsum</p></div></li>
    <li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
  </ul>
</div>

Answer 1

You can make the vertical-align work if you set the element display property value to inline-block.

E.g.

/** need to remove the float since we are now using `inline-block` */
.flexslider ul.slides li {
      float: none !important; 
      display: inline-block !important;
      vertical-align: bottom;
}

Now putting it to your current code :

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: false
  });
});

.flexslider {
    width: 500px;
}

.flexslider ul, .flexslider ol {
    margin: 0;
    padding: 0;
}

.flexslider ul.slides li {
  float: none !important;
  display: inline-block !important;
  vertical-align: bottom;
}

blockquote, q {
    font-size: 14px;
    quotes: "»" "«" "›" "‹";
}

p.quoted {
    font-size: 11px;
}

.flex-control-paging li {
    float: left;
    margin: 2px 4px 2px 0;
}

.flex-control-paging {
    box-sizing: border-box;
    float: left;
    list-style: outside none none;
    margin: -24px 0 0;
    position: relative;
    width: 100%;
    z-index: 3;
}

.flex-control-paging a::before {
    background-color: #b2b2b2;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 15px;
    width: 60px;
}

.flex-control-paging a {
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 30px;
    position: relative;
    text-indent: -999em;
    width: 62px;
}

.flex-control-paging .flex-active::before, .flex-control-paging .flex-active:hover::before {
    background-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/woothemes/FlexSlider/master/jquery.flexslider-min.js" type="text/javascript"></script>
<div class="flexslider">
  <ul class="slides">
    <li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
    <li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</q> <p class="quoted">Lorem ipsum</p></div></li>
    <li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
  </ul>
</div>