タブボタン（テキストに改行あり）を横並びに設置したい

Question

前提

javascriptでタブの切替ボタンを設置しようとしています。
前提としてhtml側を変更することはできず、javascript側で対応する必要があります。
タブボタンにはaタグを付け、表示するテキストは

2022年
1月

のように、改行入りのテキストです。
これを、横並びに1月～12月まで並べたいです。

実現したいこと

• 改行入りテキストのタブボタン（aタグ）を横並びにしたい

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

タブボタンが縦に並んでしまう

該当のソースコード

CSSを使っておらず、見づらくて申し訳ないです
codepen

<div id="testDiv">
</div>

var element = document.getElementById('testDiv');
var ptag = document.createElement('p');
var tab = document.createElement('a');
tab.innerHTML = "2022年<br>1月";
ptag.style.backgroundColor = '#99ff99';
ptag.style.textAlign = 'center';
ptag.style.borderRadius = '6px 6px 0px 0px';
ptag.style.width = '60px';
ptag.margin = '0px 1px';
ptag.padding = '5px 15px';
ptag.color = 'black';
ptag.ineHeight = '50px';
element.appendChild(ptag);
ptag.appendChild(tab);

var ptag2 = document.createElement('p');
var tab2 = document.createElement('a');
tab2.innerHTML = "2022年<br>2月";
ptag2.style.backgroundColor = '#99ff99';
ptag2.style.textAlign = 'center';
ptag2.style.borderRadius = '6px 6px 0px 0px';
ptag2.style.width = '60px';
ptag2.margin = '0px 1px';
ptag2.padding = '5px 15px';
ptag2.color = 'black';
ptag2.ineHeight = '50px';
element.appendChild(ptag2);
ptag2.appendChild(tab2);

試したこと

最初はPタグを使わずに作ってみましたが、ボタンが改行部分で２つに分離してしまったためPタグを使いました。

Answer 1

下記のCSSを追加すればどうでしょう。

#testDiv {
  display: flex;
}

あるいは、js側でするなら、

element.style.display = "flex";

Comments

[mkk]

ありがとうございました！
横並びにできました！

Answer 2

とり急ぎCSSに

#testDiv { display: flex; }

を追加すると横に並びますよ 👉 https://codepen.io/su507/pen/JjvMWvz

Comments

[mkk]

ありがとうございました！
横並びにできました！