Kendo UI DropDownList displaces other text/alignment - css

Question

I am attempting to style a Kendo UI DropDownList control to be essentially invisible until you click on it; I have almost succeeded, but the code I've produced has some "twitching" side effects.
The goal is simple; I want to have some text, and then following it is the drop down list; The drop down list should look like whatever line of text it is in, and clicking that word will present the options.
This sample does that, but it has some problems.
The text isn't showing up lined up with its preceding text
Clicking the text makes the drop down appear, but it displaces the other text
You can see a working jsBin here
jsBin
But here is my actual .less code.
.transparent(){
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 0;
}
.k-dropdown-wrap {
.transparent;
.k-input,
&[class^="k-state-"] {
.transparent;
}
}
[data-shadows="true"] {
text-shadow:
1px 1px 1px rgba(0,0,0,.5),
3px 3px 3px rgba(255,255,255,0.5);
}
HTML
<div class="small" data-shadows="true">
(small) Preceding Text
<em>
<input data-role="dropdownlist"
data-auto-bind="true"
data-value-primitive="true"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="value: selectedProduct,
source: products"
/>
</em>
</div>
<div class="h1" data-shadows="true">
(large) Preceding Text
<input data-role="dropdownlist"
data-auto-bind="true"
data-value-primitive="true"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="value: selectedProduct,
source: products"
/>
</div>
Are either of these things that can be fixed? They've been baffling me for a bit, now.

Answer 1

I have finally discovered an answer to this, as it took a bit of plumbing to come to what was eventually a pretty simple solution.
First, I had to set the KendoDropDownList containers to have display: inline; to make sure it rendered on the same block. This is done via the .k-dropdown-wrap class.
.k-dropdown-wrap {
.transparent;
display: inline;
.k-input,
&[class^="k-state-"] {
.transparent;
display: inline;
}
}
This is done to make sure that the actual drop down list itself remains the same way no matter what it's interactive state.
Next, I have to set the actual .k-dropdown class to have display: inline and set its vertical-align to baseline.
.k-dropdown {
display: inline;
vertical-align: baseline;
}
And then lastly, I wanted to make sure that none of this changed while the actual dropdown was selected, so I have to change the .k-dropdown .k-select class to have no display.
.k-dropdown .k-select {
display: none;
}
We can also get rid of the fact that the actual drop down itself is transparent (since we still want it to be skinnable) with the class .k-list-container
.k-list-container {
background: #fff;
}
You can see the fixed and working demo here;
jsBin
Major thanks to the Telerik Support Staff for helping me step by step through this one.