PHPにてサイト作成中、CSSのレイアウトが崩れてしまう

前提・実現したいこと

phpの練習でゲーム紹介サイトを作成しているのですが、flexbox使用しゲームの画面の概要タブをCSSで実装すると、
phpで文字が表示されているときは崩れず表示されます。
文字が消えるとレイアウトが崩れてしまいます。
1枚目のようにしたいのですが、phpの文字を消した状態で検証ツールでいろいろ試してもレイアウトが崩れたままです。

初学者のため拙い質問ですが、ご回答いただけますと幸いです。

発生している問題・エラーメッセージ

該当のソースコード

html
1          <div class="tab-wrap">
2            <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ゲーム概要</label>
3            <div class="tab-content">
4              <label>制作者名：</label><?php echo $value['made_name']; ?>（この制作者の他のゲームをみる）<br>
5              <label>ジャンル：</label><?php echo $value['category']; ?><br>
6              <label>プレイ時間：</label><?php echo $value['play_time']; ?><br><br>
7              <label>内容</label><br><?php echo $value['story']; ?>
8            </div>
9            <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">操作方法・推奨環境</label>
10            <div class="tab-content">
11              <label>操作方法</label><br><?php echo $value['system']; ?><br><br>
12              <label>推奨環境</label><br><?php echo nl2br($value['spec']); ?>
13            </div>
14          <?php endforeach; ?>
15          <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">実況動画一覧</label>
16          <div class="tab-content">
17            ハンター「いやーめちゃくちゃ怖かった！みんなもやってみて」　　動画を見る
18          </div>
19          <input id="TAB-04" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-04">レビュー一覧</label>
20          <div class="tab-content">
21            クリス「初見だと難しいね。でも楽しかった」
22          </div>
23        </div>

CSS
1#game-detail{
2  display: flex;
3  justify-content: center;
4  color: #ddd;
5  margin: 30px 0;
6  flex-wrap: wrap;
7}
8
9.game-detail img{
10  border: double;
11  text-align: center;
12}
13
14.game-detail{
15  line-height: 2.5;
16  width: 810px;
17}
18
19.outline{
20  text-align: left;
21}
22
23.game-detail span{
24  border-bottom: 1px solid #588da7;
25  color: #21cbff;
26  font-size: 20px;
27  display: block;
28  padding: 5px;
29}
30.tab-wrap {
31  height: 100%;
32  min-height: 300px;
33  display: flex;
34  flex-wrap: wrap;
35  flex-direction: column;
36}
37
38.tab-label {
39  width: 170px;
40  white-space: nowrap;
41  text-align: center;
42  border:1px solid #588da7;
43  border-radius: 4px 0 0 4px;
44  margin: 5px -1px 5px 1px;
45  padding: 10px .5em;
46  order: -1;
47  position: relative;
48  z-index: 1;
49  cursor: pointer;
50  float:left;
51}
52
53.tab-content {
54  display:none;
55}
56
57/* アクティブなタブ */
58.tab-switch:checked+.tab-label {
59  color: #222;
60  background: #21cbff;
61  border-right-color: #21cbff;
62}
63
64.tab-switch:checked+.tab-label+.tab-content {
65  width: 640px; /* - ボタン幅 */
66  height: 100%;
67  padding: 15px;
68  border-left: 1px solid #588da7;
69  display:block;
70  min-height: 200px;
71}
72
73/* ラジオボタン非表示 */
74.tab-switch {
75  display: none;
76}
77