お問い合わせフォームの「メールアドレス」だけずれてしまう

Question

お問い合わせフォームを作成しているのですが
各項目を横並びにしたいので
「flex box」を使用しました。

ただ「メールアドレス」の箇所が
他の項目とずれてしまいます。

「企業名」〜「電話番号」
各項目の「必須」を
上下で位置を合わせたい場合
どのようにすれば良いでしょうか？

	<section id="contact_02">
		<form action="" method="POST">
			<div class="container">		

						<div>
							<label for="i_company" class="question">         
							企業名</label>
						</div>
						<div>
							<em>必須</em>
						</div>
						<div>							
							<input id="i_company" type="text" name="company" required >
						</div>											
			</div>

			<div class="container">     
				<div>					
					<label for="i_name" class="question">          
						お名前</label>
				</div>  
					<div>						
						<em>必須</em>
					</div> 
					<div>						
						<input id="i_name" type="text" name="name" required>
					</div>
			</div>
			
			<div class="container"> 
				<div>					
					<label for="i_mailadrees" class="question">          
						メールアドレス</label>			  
				</div>   
				<div>					
					<em>必須</em>
				</div> 
				<div>					
				<input id="i_mailadrees" type="text" name="mailadrees" required>
				</div>
			</div>
			
			<div class="container"> 
				<div>					
					<label for="i_telnumber" class="question">          
						電話番号</label>
				</div>
				<div>					
					<em>必須</em>
				</div>
				<div>					
					<input id="i_telnumber" type="text" name="telnumber" required>
				</div>
			</div>
```CSS

.container{
border-top: 1px solid #ddd;
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
display:flex;
align-items: center;
justify-content: center;

}

.container label{
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 18px;
}
.container em{
border-radius: 6px;
margin-right: 8px;
margin-left: 40px;
padding-top: 8px;
padding-bottom: 8px;
width: 48px;
display: inline-block;
text-align: center;
background: #5bc8ac;
color: #fff;
font-size: 14px;
}

.container input{
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 6em;
padding-bottom: 30px;
height: 30px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 18px;

Answer 1

例えばですが、
CSS

.container div:first-of-type {
    width: 150px;
}

などになるかと思います。

如何でしょうか？

Comments

[chocon]

romromromrom様
有難う御座います！
こちらでも対応してくれました。

色々な書き方がありとても勉強になります。

[tomtomtomtom]

上手くいってよかったです。
こちらもホッとしました。
また機会がありましたら宜しくお願いいたします。

Answer 2

ラベルの幅を統一すれば良いと思うので、
↓こんな感じですかね。

.container > div:nth-child(1) {
	width: 15%;
	min-width: 10em;
}

Comments

[chocon]

gpsoft様
有難う御座いました！
リストに直してみたり色々試していたのですが
すごく納得いきました。

有難う御座いました！