How to use CSS to move letters to the bottom of their divs

I have an example: https://jsfiddle.net/e9ozyj0w/

I want to have the letters g, o,   and n aligned to the bottom of their divs and the completion owhere aligned to them.

How can I do this? (I've already tried vertical-align, text-align and bottom: 0.)

P.S. A minimal reproducible example is:

html:

<div class="input">
  <div class="char">g</div>
  <div class="char">o</div>
  <div class="char">&nbsp;</div>
  <div class="char">n</div>
  <div class="completions">
    <div>orth</div>
    <div>orthwards</div>
    <div>owhere</div>
  </div>
</div>

css:

div.input {
    position: absolute;
    bottom: 0px;
    display: flex;
}

div.prefix {
    display: flex;

}

div.completion {
    position: relative;
}

div.char {
    bottom: 0px;
}

It produces:

go north
    orthwards
    owhere

I would like:

    orth
    orthwards
go nowhere

Solution

add to div.input:

align-items: flex-end;

Here is my go-to documentation on how to use flexbox: CSS Tricks Flexbox Guide