<div>タグを改行しないようにしたい

divタグを改行しないようにしたいのですがうまくいきません

html
1<div class="inline">
2	<div class="a">
3		テスト
4		
5	</div>
6	<div class="b">
7    テスト
8	</div>
9</div>
10<div class="inline">
11	<div class="c">
12	テスト
13	</div>
14</div>

css
1.a{
2border-width: 1px;
3border-style: solid;
4width: 350px;
5height: 300px;
6}
7
8.b{
9border-width: 1px;
10border-style: solid;
11width: 300px;
12height: 200px;
13}
14.c{
15border-width: 1px;
16border-style: solid;
17height: 500px;
18width: 200px;
19}
20.inline{
21display: inline-block;
22_display: inline;
23}

borderがあるdivをインライン要素にするとborderが消えてしまうので上位にdivを追加しました
縦にクラスaとbが並び、その横に縦長のcがあるというようにしたいのですが、ブラウザで開いてみるとクラスaとbが下に下がってしまいます。div内に文字を入れないと思ったとおりに行きます
htmlが間違っていればご教授ください

行動規範の内容に同意します

回答1件

ベストアンサー

CSS3のflexボックスを使ってよいならば、以下のコードで実現できます。

html
1  <div class="parent">
2    <div>
3      <div class="a">テスト</div>
4      <div class="b">テスト</div>
5    </div>
6    <div>
7      <div class="c">テスト</div>
8    </div>
9  </div>

css
1.parent {
2  display: flex;
3}
4
5.a {
6  border-width: 1px;
7  border-style: solid;
8  width: 300px;
9  height: 300px;
10}
11
12.b {
13  border-width: 1px;
14  border-style: solid;
15  width: 300px;
16  height: 200px;
17}
18
19.c {
20  border-width: 1px;
21  border-style: solid;
22  height: 500px;
23  width: 200px;
24}
25