Getting react-widgets' elements to align in row-wise flexbox - css

Question

I'm having trouble integrating react-widgets (Dropdownlist and Multiselect) with my styling in the same way as the input-fields I've used before.
It should look like this:
With the white rectangles beeing react-widgets Dropdownlists respectively Multiselect.
Here's a codepen-example, with the second blue block containing react-widget's markup: http://codepen.io/peletiah/pen/ORLaGr
This is the relevant (simplified) markup:
.route {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.sequence {
display: flex;
height: 90px;
line-height: 90px;
}
.action {
align-self: center;
line-height: normal
}
<div class="route">
<div class="sequence">
<div class="action">
<span>
<input value="set">
</span>
<span>
<input value="data goes here">
</span>
</div>
</div>
<div class="sequence">
<div class="action">
<div class="rw-dropdownlist rw-widget">
<div class="rw-input">set</div>
</div>
<div class="rw-multiselect rw-widget">
<div class="rw-multiselect-wrapper">
<input>
</div>
</div>
</div>
</div>
</div>
The markup inside the action-div in the second "sequence" is produced by react-widget, so I have a no influence and can't easily replace them with spans.
The widgets are supposed to be aligned next to each other like the inputs in the first sequence, but they are stacked on top of each other.
Is it possible to fix this with css?
In the codepen-example above I've included the react-widgets less-code in the upper part of the css-section of the codepend, at then end of it is my custom css.

Answer 1

There where two issues with the original code-sample.
Vertical alignment of the "action"-container inside the "sequence"-container was achieved by setting "line-height".
The line-height is also responsible for the 90px-high "rw-multiselect-wrapper"-div, which it inherits from the "sequence"-class.
Flexbox allows self-alignment of children with the "align-self"-property.
Adding an "align-self" to the class and wrapping each react-widget-div's in their own "action"-div fixes the alignment issue and the height-issue.
.route {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.sequence {
display: flex;
}
.action {
align-self: center;
}
<div class="route">
<div class="sequence">
<div class="action">
<span>
<input value="set">
</span>
</div>
<div class="action">
<span>
<input value="data goes here">
</span>
</div>
</div>
<div class="sequence">
<span class="sequence-order">2</span>
<div class="action">
<div class="rw-dropdownlist rw-widget">
<div class="rw-input">bridge</div>
</div>
</div>
<div class="action">
<div class="rw-multiselect rw-widget">
<div class="rw-multiselect-wrapper">
test
<input>
</div>
</div>
</div>
</div>
</div>
Codepen-sample: http://codepen.io/peletiah/pen/ozjNpW