Label next to x-input

[prog-r-amer]

Hello,

is there a good way to achieve the same look as this codepen using x-input?
I didn't manage to get it working with float, display:inline or anything I tried.

https://codepen.io/anon/pen/WBgBNo

[jarek-foksa]

This is a general CSS question, there are like 20 ways to achieve such layout and each one has some benefits and drawbacks. For example:

<x-box>
  <x-label style="width: 50px;">Label 1</x-label>
  <x-input style="flex: 1;"></x-input>
</x-box>

<x-box style="margin-top: 8px;">
  <x-label style="width: 50px;">Label 2</x-label>
  <x-input style="flex: 1;"></x-input>
</x-box>

Note that there is nothing special about the <x-box> element, it's just like a <div> or <span> but with slightly different default stylings which make it more suitable as a flexbox container. Also note that <x-input> has a max-width: 140px; style set by default, you might want to override it with max-width: none;.