Polymer 1.x: Styling paper-input width and inline

Here is my jsBin.

I want to put a paper-input inline with a paper-menu. However, my below attempts result in the paper-input styled as block. How do I style it inline? I also want the width of the paper-input to be 25px instead of 100%. How do I accomplish this?

Please provide a working code example with your answer.

http://jsbin.com/mufuzodife/1/edit?html,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import"> 
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    .inline, paper-item, paper-input {
      display: inline;
    }
    paper-input, --paper-input-container {
      width: 25px;
    }
  </style>

  <div class="inline">
    <paper-menu class="inline">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
    <paper-input label="text input"></paper-input>
  </div>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Solution

You can use iron-flex-layout (https://elements.polymer-project.org/elements/iron-flex-layout) to align these elements horizontally.

Here is a JSBin: http://jsbin.com/cozace/edit?html,output

And the code itself:

<dom-module id="x-element">

<template>
  <style>

    paper-input {
      width: 25px;
    }

    .inline, paper-item {
      display: inline;
    }

    .horizontal {
      @apply(--layout-horizontal);
    }

  </style>

  <div class="horizontal">
    <paper-menu class="inline">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
    <paper-input label="text input"></paper-input>
  </div>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

PS: Don't forget to import the iron-flex-layout.