cssについて、添付上段の通りの表示になってしまいますが、 添付下段のような表示にしたいです。 調べてみたのですが、 clear: both;を使うのか、どう使うのか等 わかりませんでした。 ご教示お願いします。 【html】 <div class="hidden_box"> <div class="col-xs-12 col-md-3"> <label for="label1"><span class="font-size16 fadein-text2">ここをタップすると表示</span></label> </div> <input type="checkbox" id="label1"/> <div class="hidden_show"> <!--非表示ここから--> <p> <div class="col-xs-12 col-md-12"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> </p> <!--ここまで--> </div> </div> 【CSS】 .hidden_box label { width:100%; position: relative; display: block; padding:8px 0 10px; margin: .5em 0; background: #ffffff; color: #287dc8; text-align:center; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; text-decoration: none !important; border:2px solid #287dc8; } .hidden_box label:hover{ background: #287dc8; color: #fff; } .hidden_box label:hover:before{ background: #287dc8; color: #fff; } <!-- /*チェックは見えなくする*/ .hidden_box input { display: none; }--> /*中身を非表示にしておく*/ .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .hidden_box input:checked ~ .hidden_show { padding: 0px 0; opacity: 1; } col-xs-、col-md-は 画面の幅に合わせて widthを指定しています。