如何将输入框与div

Question

我正在尝试在登录页面中对齐某些内容。我希望图片显示在左侧和右侧的输入框和div下方的按钮上。像这样：

但这就是正在发生的事情（在Safari上。Chrome可以正常工作，你可以在顶部图片上看到）

问题是虽然它部分适用于Chrome，但输入框太小而且无法增加其尺寸。

这是我尝试使用的代码：

// Outer white DIV for the forms and buttons:

.login-form {
  width: 360px;
  height: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 19px 29px 29px 19px;
  color: #444444;
  background: rgba(253, 253, 253, 1.000);

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border: solid 1px rgba(144, 144, 144, 0.075);
}

// Login field for e-mail:

.login-field-up {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-right: 100px;
  float: left;
  display: inline-block;
}

/ Login field for password:

.login-field-down {
  margin-top: 10px;
  margin-bottom: 15px;
  float: left;
}

// DIV for Icons of user credential and golden key:

.login-icon {
  margin-top: 15px;
  margin-right: 15px;
  float: left;
  display: inline-block;
}

// Right checbox:

.right-col {
  float: right;
  text-align: center;
  margin-top: 10px;
}

Left blue login button: 

.left-col {
  float: left;
  margin-left: 10px;

}

如果还有其他简单方法可以做到，我就能做到。由于我一直使用后端，所以我很喜欢CSS。

<section id="banner">
    <h2>Title</h2>
    <section>
        <div id="skel-layers-wrapper" class="login-form">
            <form method="post" action="{% url 'principal' %}">
                <div class="login-icon">
                    <img src="{% static "icons/identity.png" %}" class="icons">
                </div>
                <div class="login-field-up">
                        <input type="text" name="username" id="username" placeholder="E-mail" />
                </div>
                <div class="login-icon">
                    <img src="{% static "icons/key_user.png" %}" class="icons">
                </div>
                <div class="login-field-down">
                        <input type="password" name="password" id="username" placeholder="Password" />
                </div>
                <div class="left-col">
                        <input type="submit" value="Login!" class="button" />
                </div>
                <div class="right-col">
                    <input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
                    <label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
                </div>
            </form>
        </div>
    </section>
</section>