スライドショーと文字テキストを横並びにする

Question

スライドショーと文字テキストを横並びに配置したいです。

スライドショーと文字のテキストが横並びにできません。
現在display：　inline-block；で横並びにしようとしていますが、横並びになりません。
横並びにするコードが知りたいです。

    <div id="history">
    	
        <div class='container'>
          <div class='single-item'>
            <div>
              <img src="ryokou1.jpg" width="480" height="330">
            </div>
            <div>
              <img src="ryokou2.jpg" width="480" height="330">
            </div>
            <div>
            <img src="ryokou3.jpg" width="480" height="330">
            </div>
          </div>


         <div class="text1" align="right"><h3>My history</h3>
        <li>aaaaaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
         </div>



       </div>
   </div>

.container {
  margin-top: 40px;
  margin-left: 10px;
  padding: 10px;
  width: 100%;
  color: #333;
  background: white;
  height: 500px;
  display: inline-block;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;

}

.single-item {
  width: 480px;
  
}

.text1 {  
  text-align: left;
  display: 
}

Answer 1

img と テキストを同じdivタグに括ってあげれば実現可能です。
最も簡単な方法且つ多様なデバイスに対応したいとのことでしたら、display: table;プロパティを使用することをオススメします。
要点としては、sinble-item__hogeにdisplay: table;を指定します。
後は、子要素のimgタグとpタグにdisplay: table-cell;を指定するとtableタグの扱いをすることが可能になります。
これだけだとimgとテキストが中央揃いにならないので、pタグにvertical-align: middle;を指定することで画像に対して中央にすることが可能になります。

<div class="sinble-item__hoge">
  <img src="https://dummyimage.com/400x200">
  <p>テキストテキスト</p>
</div>

jsFiddleでサンプルを作成したので確認ください。
サンプル動作

Comments

[ikko_]

ありがとうございます。実装できました！

Answer 2

横並びにしたいに画像とテキストを同じclass内に入れてcssでfloatで回り込ませるかflexboxを使って横並びに出来るかと。
どちらも調べたらすぐわかります。
あと余計なdivタグが多いと思います。