Vertical align inner elements

Question

I am struggling for quite some time with a solution for my specific problem to vertically align multiple inner elements.

What I am trying to achieve looks pretty much like this (action buttons on the right vertically aligned with the left text, the material icons aligned in the middle of the bordered ul element):

Using materialize's valign-wrapper I was able to vertically align the action-buttons div but I am struggling with the material icons inside of the bordered ul element. I have prepared a jsfiddle to demonstrate this:

https://jsfiddle.net/nafhLz1w/14/

Note: <div class="suggestion-actionbuttons right"> the class "right" does a float:right; to this element. (Materialize Framework).

1. I always want to show the action buttons on the right in one row
2. The two material icons on the right should always be aligned as shown in the given example

Answer 1

You need to use white-space:nowrap to prevent inline-block s from wrapping:

.suggestion-actionbuttons {
  white-space: nowrap;
}

Updated fiddle .

Answer 2

Fiddle link - https://jsfiddle.net/nafhLz1w/17/

Using Flex property makes things easier:

Add the below css classes at the end of your css file.

.suggestion-text {
    margin: 5px 0;
    box-sizing : border-box;
    padding : 20px;
}

.suggestion-actionbuttons{
  display : flex;
}

.actions-small{
   display : flex;
}
.approved{
  margin-top : 7px;
}