I need to align these imputs
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.6;
}
#btnRefresh {
background-color: #6a9ce6;
}
.button {
background: rgb(60, 163, 177);
padding: 1em 2em;
color: #fff;
border: 0;
}
.button:hover {
background: #333;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #f4f4f4;
margin: 20% auto;
padding: 20px;
width: 40%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
animation-name: modalOpen;
animation-duration: 0.5s;
}
.closeBtn {
color: #ccc;
float: right;
font-size: 30px;
}
.closeBtn:hover,
.closeBtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
@keyframes modalOpen {
from {
opacity: 0
}
to {
opacity: 1
}
}
<div id="simpleModal" class="modal">
<div class="modal-content">
<span class="closeBtn">×</span>
<h2>Calcule</h2>
<div class="row">
<form class="col s12">
<label for="inputhoras"> Quantas Horas a lâmpada ficara ligada? </label>
<input type="number" placeholder="horas" id="inputhoras" class="active">
<p></p>
<label for="inputkw">Quanto custa o KW/H na sua região?</label>
<input type="number" placeholder="kw" id="inputkw" class="active">
<p></p>
<label for="inputkw">Qual a quantidade lâmpadas você deseja?</label>
<input type="number" placeholder="Quantidade de Lâmpadas" id="qtdelamp" class="active">
<p></p>
<div class="input-field col s12">
<label>Tipo de lâmpada</label>
<select id="lampadaSel">
<option value="" disabled selected>Selecione</option>
<option value="1">Lâmpada Bulbo 10W</option>
<option value="2">Lâmpada Bulbo 40W</option>
<option value="3">Lâmpada Bulbo 60W</option>
<option value="4">Lâmpada Corn Led 36W</option>
<option value="5">Lâmpada Corn Led 48W</option>
<option value="6">Lâmpada Par 30 6W</option>
<option value="7">Lâmpada Par 30 10W Dimerizável</option>
<option value="8">Lâmpada Par 38 15W</option>
<option value="9">Lâmpada Par 38 14W</option>
<option value="10">Lâmpada Tubular 9W</option>
<option value="11">Lâmpada Tubular 18W</option>
<option value="12">Lâmpada Tubular 45W</option>
</select>
</div>
<h3>Led R$: <span id="lblResultado"></span></h3>
<h3>Incandescente R$ <span id="lblin"></span></h3>
<h3> Economia Mensal Incandescente para Led R$ <span id="lblec1"></span></h3>
<h3>Flourescente R$ <span id="lblflour"></span></h3>
<h3> Economia Mensal Fluorescente para Led R$ <span id="lblec2"></span></h3>
<input type="button" id="btnCalcular" class="button" value="Calcular">
</form>
</div>
</div>
</div>