formの位置を、左端をそろえたい

Question

初めに

現在、入力フォームを複数出力し、左端をそろえようとしています。

環境

windows10
eclipse
bootstrap4

コード

<div class="content">
<h2 class="head">試し</h2>
<form action="" method="post">
 <div class="form-group row">
  <label for="text3a" class="col-sm-2 col-form-label">入力1</label>
  <div class="col-sm-10">
   <input type="text" name="" size="5" id="text3a" class="form-control" required ><br>
  </div>
 </div>
 <div class="form-group row">
  <label for="Password" class="col-sm-2 col-form-label">入力場所2</label>
  <div class="col-sm-10">
   <input type="text" id="zipcode" name="" size="5" class="form-control" id="Password" required pattern="\d{3}-?\d{4}">
  </div>
 </div>
</form>

出力結果

入力1
□
入力場所2
□

##　やりたいこと
入力1 　　　　　　　　 □
入力場所2 　　　　　　　　 □
□の左辺を揃えたい　　　　 ↑
ここの端を揃えたい

Comments

[yambejp]

左端は揃っているように見えますが？

[sousuke]

少なくともformの閉じタグがないようにみえる

[unity3dbigginer]

yambejpさん
すみません、表示み誤りがありました。
正しくは上記の通りです。

[unity3dbigginer]

sousukeさん
すみません、formの終了タグのコピーミスでした。
訂正させていただきました。

Answer 1

おそらくヤリタイことはテーブルを作ることなので、すなおにtableにすればいいですが
無理やり整形するなら

form{display:table}
.row{display:table-row}
.row > *{display:table-cell}

Comments

[unity3dbigginer]

tableを入れたらできるようになりました！
ありがとうございました！

Answer 2

単純に閉じタグがおかしいのでは？最初のdiv閉じてないし、最後のinputはid2つ指定している。
わからんかったので「https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css」だけ適用した
jsfiddle

<div class="content">
  <h2 class="head">試し</h2>
  <form action="/AlphaLibrary/MemberResistServlet" method="post">
    <div class="form-group row">
      <label for="text3a" class="col-sm-2 col-form-label">入力1</label>
      <div class="col-sm-10">
        <input type="text" name="member_name" size="5" id="text3a" class="form-control" required><br>
      </div>
    </div>
    <div class="form-group row">
      <label for="Password" class="col-sm-2 col-form-label">入力場所2</label>
      <div class="col-sm-10">
        <input type="text" id="zipcode" name="postal" size="5" class="form-control" required pattern="\d{3}-?\d{4}">
      </div>
    </div>
  </form>
</div>