How to fix this form fields to be perfect? - css

Question

I want this form fields just like the red line in this picture https://i.stack.imgur.com/gbvDs.png
input,
select,
textarea {
width: 20%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.container {
/* the form is inside this container */
padding: 20px;
margin: 20px;
overflow: auto;
text-align: center;
}
<div class="container">
<form method="post" enctype="multipart/form-data" id="form">
<label for="id_image1">profile picture</label>
<input type="file" name="image1" accept="image/*" required id="id_image1" />
<label for="id_image2">cover picture</label>
<input type="file" name="image2" accept="image/*" required id="id_image2" />
<label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
<button type="submit" class="button">Upload</button>
</form>
</div>

Answer 1

You can accomplish this with CSS Grid and a little padding.
.wrap,
.field-container {
display: inline-grid;
}
.field-container {
grid-template-columns: 1fr auto;
padding-bottom: 0.5rem;
}
.field-container label {
padding-right: 2rem;
text-align: right;
}
<div class="wrap">
<div class="field-container">
<label for="profilePic">Profile picture</label>
<input type="text" id="profilePic">
</div>
<div class="field-container">
<label for="coverPic">Cover picture</label>
<input type="text" id="coverPic">
</div>
<div class="field-container">
<label for="name">Name</label>
<input type="text" id="name">
</div>
</div>
jsFiddle

Answer 2

I changed your code this way, please check if it is suits what you desire:
<div class="container">
<form method="post" enctype="multipart/form-data" id="form">
<div class="rows">
<div class="column">
<label for="id_image1">profile picture</label>
<input type="file" name="image1" accept="image/*" required id="id_image1" />
</div>
<div class="column">
<label for="id_image2">cover picture</label>
<input type="file" name="image2" accept="image/*" required id="id_image2" />
</div>
<div class="column">
<label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
<button type="submit" class="button">Upload</button>
</div>
</div>
</form>
</div>
<style>
input,
select,
textarea {
width: 55%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
label {
width:30%;
float:left;
}
#form{
width:100%;
}
.container {
width:40%;
margin:auto;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
</style>