appendChildでフォームを横並びに追加したい

Question

javascriptでフォームを追加するボタンを作成しました。
現在は下に追加されるが、これを右に追加され、画面の端までいったら改行しまた右並びで追加されるような仕様にしたいです。
ご教示頂けると助かります。

<div id="form_area">
  <input type="text" id="inputform_0" placeholder="フォーム-0">
  <button id="0" onclick="deleteBtn(this)">削除</button>
</div>
<input type="button" value="フォーム追加" onclick="addForm()">

input {
  display: block;
  margin-top: 10px;
}
#form_area input {
    display: flex; 
    flex-direction: column;
                    } 

var i = 1 ;
function addForm() {
var input_data = document.createElement('input');
  input_data.type = 'text';
  input_data.id = 'inputform_' + i;
  input_data.placeholder = 'フォーム-' + i;
  var parent = document.getElementById('form_area');
  parent.appendChild(input_data);

  var button_data = document.createElement('button');
  button_data.id = i;
  button_data.onclick = function(){deleteBtn(this);}
  button_data.innerHTML = '削除';
  var input_area = document.getElementById(input_data.id);
  parent.appendChild(button_data);

  i++ ;
}
function deleteBtn(target) {
  var target_id = target.id;
  var parent = document.getElementById('form_area');
  var ipt_id = document.getElementById('inputform_' + target_id);
  var tgt_id = document.getElementById(target_id);
  parent.removeChild(ipt_id);
  parent.removeChild(tgt_id);	
}

Answer 1

formも設定されていないようなのですが、全体で一つのフォームなのか
ここが一つのフォームなのかがわかりません。
また削除の処理も抜けをどうしたいかわかりません
inputのidもnameじゃなくてよいのでしょうか？

Comments

[yambejp]

参考

https://codepen.io/yambejp/pen/KKMYqPb

Answer 2

これでダメなのなら、質問に条件を追記してください。

        #form_area input {
            display: inline-block;
        }

Comments

[ojigi]

ご回答いただきありがとうございます。
inline-blockを追加することでできました！
ただもし、テキストボックスと削除ボタンをflex-directionで縦並びにしたい場合はどうすればよいでしょうか、、、？