これらの2つのdivを互いに垂直に近く表示するにはどうすればよいですか？

Question

少しウェブ開発に新しいので、私に同行してください。 hereをCodepenで見ることができますが、私はプロトタイプのメッセージングクライアントを開発しています。チャット名とプレビューテキストは、画像の中のように、実際には近くにあるようにしたいです。hereまた、「Now」と書かれている画像のように、ボタンの最後に別のDiv/Spanを挿入して、内部のテキストも入れたいと思っています。

参考のために私のCSSがありますが、2つ（本当に3つ）のdivを正しい場所に配置するにはどうしたらいいですか？

.nav-side-menu { 
    overflow: hidden; 
    font-size: 18px; 
    font-weight: 100; 
    border-right: 1px solid #484848; 
    background-color: #e6e6e6; 
    position: fixed; 
    top: 0px; 
    width: 20%; 
    height: 100%; 
    color: #484848; 
} 
.nav-side-menu .brand { 
    background-color: #e6e6e6; 
    line-height: 75px; 
    display: block; 
    text-align: center; 
    font-size: 32px; 
    border-bottom: 1px solid #484848; 
} 
.chat-header { 
    position: fixed; 
    left: 20%; 
    width: 80%; 
    background-color: #e6e6e6; 
    line-height: 75px; 
    display: block; 
    text-align: center; 
    font-size: 32px; 
    border-bottom: 1px solid #484848; 
} 

.nav-side-menu .toggle-btn { 
    display: none; 
} 

.nav-side-menu ul, 
.nav-side-menu li { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    line-height: 80px; 
    cursor: pointer; 
} 
.nav-side-menu ul :not(collapsed) .arrow:before, 
.nav-side-menu li :not(collapsed) .arrow:before { 
    /*font-family: FontAwesome;*/ 
    content: "\f078"; 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    vertical-align: middle; 
    float: right; 
} 
.nav-side-menu ul .active, 
.nav-side-menu li .active { 
    background-color: #3ab795; 
} 

.nav-side-menu li { 
    padding-left: 0px; 
    border-bottom: 1px solid #484848; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.nav-side-menu li a { 
    padding-left: 20px; 
    padding-top: 29px; 
    padding-bottom: 29px; 
    padding-right: 100%; 
    text-decoration: none; 
    color: #484848; 
} 
.nav-side-menu li a i { 
    padding-left: 10px; 
    width: 20px; 
    padding-right: 20px; 
} 
.nav-side-menu li:hover { 
    background-color: #3ab795; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#searchbox{ 
    width: 100%; 
    position: relative; 
    margin: 5px 0 5px 0; 
    padding: 3px 10px 3px 20px; 
    box-sizing: border-box; 
    border: 1px solid #484848; 
    border-radius: 20px; 
    background-color: #e6e6e6; 
} 

.search-menu{ 
    border-bottom: 1px solid #484848; 
    padding: 5px; 
} 

.chat-box{ 
    position: fixed; 
    bottom: 0; 
    width: 80%; 
    height: 60px; 
    left: 20%; 
    background-color: #e6e6e6; 
    border-top: 1px solid #484848; 
} 

#message-box{ 
    width: 95%; 
    position: relative; 
    margin: 15px 5px 5px 5px; 
    padding: 3px 10px 3px 20px; 
    border: 1px solid #484848; 
    border-radius: 20px; 
    background-color: #e6e6e6; 
} 

.send-message{ 
    background-color: #3ab795; 
    width: 3%; 
    height: 30px; 
    border-radius: 5px; 
    border: none; 
} 

.send-message:focus{ 
    outline: 0; 
} 

.send-message:active{ 
    background-color: #29a281; 
} 

.preview-text{ 
    font-size: 11px; 
} 

@media (max-width: 767px) { 
    .nav-side-menu { 
    position: relative; 
    width: 100%; 
    margin-bottom: 10px; 
    } 
    .nav-side-menu .toggle-btn { 
    display: block; 
    cursor: pointer; 
    position: absolute; 
    right: 20px; 
    top: 5px; 
    z-index: 10 !important; 
    padding: 3px; 
    background-color: #e6e6e6; 
    color: #484848; 
    width: 30px; 
    text-align: center; 
    } 
    .brand { 
    text-align: left !important; 
    font-size: 22px; 
    padding-left: 20px; 
    line-height: 50px !important; 
    } 
} 

@media (min-width: 767px) { 
    .nav-side-menu .menu-list .menu-content { 
    display: block; 
    } 
} 

body { 
    margin: 0px; 
    padding: 0px; 
    font-family: 'Roboto', sans-serif; 
} 

.nano { height: 85%; } 
.nano .nano-pane { background: #888; } 
.nano .nano-slider { background: #111; } 

Answer 1

http://codepen.io/djkantoci/pen/KNGYbv

1.5に変更しline-height（またはいくつかの他の値が、ピクセルを使用しないでください）あなたのnav-side-menu要素の行の高さを調整します。 いくつかpadding-rightliに（時間テキストのためのスペースを作るために）、時間を追加し、その時間のdivにposition: absoluteを追加

Answer 2

.nav-side-menu ul, 
.nav-side-menu li { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    line-height: 30px; 
    cursor: pointer; 
} 

Answer 3

あなたのコードはかなり右にある（li要素の相対を作ることを忘れないでください）。線の高さのために、その要素は非常に高さを取得します。下記のコードをご覧ください。

 
    .nav-side-menu ul, 
    .nav-side-menu li{ 
     line-height: normal; 
    } 
    .nav-side-menu li> div { 
     padding: 5px 12px; 
    }