フレックスボックスで2つの要素を同じ行に配置するにはどうすればよいですか？

Question

<template> 
<style> 
    .container { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    } 
    .display { 
    display: flex; 
    width: 100%; 
    height: 85%; 
    } 
    .input { 
    display: inline-block; 
    flex-direction: row; 
    align-self: flex-end; 
    justify-content: flex-start; 
    width:100%; 
    } 

</style> 

<paper-drawer-panel> 
    <paper-header-panel drawer> 
    <paper-toolbar> 
     <div>Application</div> 
    </paper-toolbar> 
    </paper-header-panel> 
    <paper-header-panel main> 
    <!--toolbar--> 
    <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <div class="container" tool layout horizontal> 
     <div class="app-title" ><span>Cat Chat</span></div> 

     <div class="account-icon"> 
     <iron-icon icon="account-circle"></iron-icon> 
     <span>number of people</span> 
     </div> 
     </div> 

    </paper-toolbar> 

    <!--Main Content --> 
    <div class="display" flex> 
    </div> 
     <div class="input" flex> 
      <paper-input label="Type message..." value={{input}}></paper-input> 
      <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab> 
     </div> 
    </paper-header-panel> 
</paper-drawer-panel> 

私は入力が終わり幅とボタンのほとんど渡って行くと、同じ行の紙入力と紙ボタンをラインアップしようとしています。現在、ボタンは入力の下にあります。どのように整列させるのですか？

Answer 1

.inputセレクタにdisplay: flexを適用していません。

HTML：

<div class="display"> 
</div> 
<div class="input"> 
    <paper-input label="Type message..." value={{input}}></paper-input> 
    <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab> 
</div> 

CSS：

.input { 
    display: flex; 
    flex-direction: row; 
    align-self: flex-end; 
    justify-content: flex-start; 
    width:100%; 
    }