Solamente tendrías que usar la propiedad vertical-align: top;
para que el section
esté alineado arriba del todo:
section {
display: inline-block;
vertical-align: top;
width: 40%;
}
Demo:
/* Estilos generales */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #F8F8F8;
}
h1 {
text-align: center;
margin-top: 50px;
color: #333333;
}
h2 {
margin-top: 50px;
color: #333333;
}
section {
display: inline-block;
vertical-align: top;
width: 40%;
}
form {
width: 50%;
max-width: 720px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 20px;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="date"],
select {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
font-size: 16px;
box-sizing: border-box;
background-color: #F0F0F0;
color: #333333;
}
input[type="submit"] {
width: 100%;
max-width: 200px;
padding: 10px;
border-radius: 5px;
border: none;
margin: 20px auto;
font-size: 16px;
box-sizing: border-box;
background-color: #333333;
color: #FFFFFF;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="submit"]:hover {
background-color: #111111;
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
color: #333333;
}
/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
section {
display: block;
width: 100%;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New Vendors</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
</head>
<body>
<h1>Creation New Vendors</h1>
<section>
<form>
<h2> Request General Information</h2>
<label for="person">Requestor:</label>
<input type="text" id="person" name="person" required><br><br>
<label for="date">Date of request:</label>
<input type="date" id="date" name="date" required><br><br>
<label for="company">Choose Company:</label>
<select id="company" name="company">
<option value="eduLLC">Austral Edu LLC</option>
<option value="servicesLLC">Austral Services LLC</option>
<option value="australCL">Austral Turismo Brasil Ltda</option>
<option value="australBR">Servicios Austral Chile Spa</option>
<option value="australBR">Servicios Austral Peru SRL</option>
</select>
<label for="vendor">Supplier's Name:</label>
<input type="text" id="vendor" name="vendor" required><br><br>
<label for="currency">Choose currency:</label>
<select id="currency" name="currency" required>
<option value="BRL">Brazilian Real (BRL)</option>
<option value="CAD">Dólar canadiense (CAD)</option>
<option value="CLP">Chilean Peso (CLP)</option>
<option value="COP">Colombian Peso (COP)</option>
<option value="CRC">Costa Rica Colon (CRC)</option>
<option value="CZK">Czech Koruna (CZK)</option>
<option value="DKK">Danish Krone (DKK)</option>
<option value="EUR">Euro (EUR)</option>
<option value="GBP">Libra esterlina (GBP)</option>
<option value="USD">Dólar estadounidense (USD)</option>
<option value="MXN">Mexican Peso (MXN)</option>
<option value="PEN">Peruvian Peso (PEN)</option>
</select>
</form>
</section>
<section>
<form>
<h2> Vendor General Information</h2>
<label for="vendorLegalName">Vendor Legal Name:</label>
<input type="text" id="vendorLegalName" name="vendorLegalName" required><br><br>
<label for="vendorAddress">Vendor Address:</label>
<input type="text" id="vendorAddress" name="vendorAddress"><br><br>
<label for="vendorPhoneNumber">Vendor Phone:</label>
<input type="text" id="vendorPhoneNumber" name="vendorPhoneNumber"><br><br>
<label for="vendorEmail">Vendor Email:</label>
<input type="text" id="vendorEmail" name="vendorEmail" required><br><br>
<label for="vendorServices">Vendor Email:</label>
<input type="text" id="vendorServices" name="vendorServices" ><br><br>
</form>
</section>
<input type="submit" value="Enviar">
</body>
</html>
Edit:
Para evitar que se desborde los section
, la idea sería que los section
ocupen todo el alto posible (el 100%
). Entonces, primero estructuremos tu HTML. Vamos a crear un div
que encierre a estos dos section
y a tu input
enviar.
<div class="contenido">
<section>
<!-- Todo tu section 1 -->
</section>
<section>
<!-- Todo tu section 2 -->
</section>
<input type="submit" value="Enviar">
</div>
Y a la clase contenido
indiquemos que sea flexible, para que los section
junto con tu botón de enviar estén uno al lado del otro:
.contenido {
display: flex;
}
Y hagamos que los form
de los section
ocupen toda la altura posible de contenido
, ya que cada form
está dentro de un section
. De esta forma, la altura del form
será el mismo que el section
, y como section
está dentro de contenido
, hará que éste ocupe toda la altura posible (y ya no vendría necesario el vertical-align: top
del section
):
form {
width: 50%;
max-width: 720px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 20px;
box-sizing: border-box;
border-radius: 5px;
height: 100%; /* le añado esto */
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
Ahora, debemos modificar a tu input
enviar, ya que, debido a que el input
no está encerrado en ningún bloque, la altura del input
ocupará todo el máximo de contenido
automáticamente (al igual que los sections
). Entonces, creemos un div
que encierre a este input
:
<div class="contenido">
<section>
<!-- Todo tu section 1 -->
</section>
<section>
<!-- Todo tu section 2 -->
</section>
<div class="myinput">
<input type="submit" value="Enviar">
</div>
</div>
Y le damos las siguientes clases, para centrar su contenido (tu input
):
.myinput {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
Así, el div
llamado myinput
ocupará todo el alto, pero el input
no, solo estará centrado.
Y por último, para que se vea mejor en dispositivos pequeños, hice las siguientes modificaciones en la regla @media
:
@media only screen and (max-width: 767px) {
.contenido, section {
flex-direction: column;
width: 100%;
padding: 0;
gap: 20px;
}
.myinput {
width: 100%;
}
}
Aquí solo indico que la dirección de los elementos que están dentro de contenido
y section
serán en columnas, tendrán un ancho de 100%
y una separación de 20px
. También, el div
del input ocuará todo el ancho de 100%
para que se centre correctamente.
Código final:
/* Estilos generales */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #F8F8F8;
}
h1 {
text-align: center;
margin-top: 50px;
color: #333333;
}
h2 {
margin-top: 50px;
color: #333333;
}
.contenido {
display: flex;
}
section {
display: inline-block;
width: 40%;
}
.myinput {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
form {
width: 50%;
max-width: 720px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 20px;
box-sizing: border-box;
border-radius: 5px;
height: 100%;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="date"],
select {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
font-size: 16px;
box-sizing: border-box;
background-color: #F0F0F0;
color: #333333;
}
input[type="submit"] {
width: 100%;
max-width: 200px;
padding: 10px;
border-radius: 5px;
border: none;
margin: 20px auto;
font-size: 16px;
box-sizing: border-box;
background-color: #333333;
color: #FFFFFF;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="submit"]:hover {
background-color: #111111;
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
color: #333333;
}
/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
.contenido, section {
flex-direction: column;
width: 100%;
padding: 0;
gap: 20px;
}
.myinput {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New Vendors</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
</head>
<body>
<h1>Creation New Vendors</h1>
<div class="contenido">
<section>
<form>
<h2> Request General Information</h2>
<label for="person">Requestor:</label>
<input type="text" id="person" name="person" required><br><br>
<label for="date">Date of request:</label>
<input type="date" id="date" name="date" required><br><br>
<label for="company">Choose Company:</label>
<select id="company" name="company">
<option value="eduLLC">Austral Edu LLC</option>
<option value="servicesLLC">Austral Services LLC</option>
<option value="australCL">Austral Turismo Brasil Ltda</option>
<option value="australBR">Servicios Austral Chile Spa</option>
<option value="australBR">Servicios Austral Peru SRL</option>
</select>
<label for="vendor">Supplier's Name:</label>
<input type="text" id="vendor" name="vendor" required><br><br>
<label for="currency">Choose currency:</label>
<select id="currency" name="currency" required>
<option value="BRL">Brazilian Real (BRL)</option>
<option value="CAD">Dólar canadiense (CAD)</option>
<option value="CLP">Chilean Peso (CLP)</option>
<option value="COP">Colombian Peso (COP)</option>
<option value="CRC">Costa Rica Colon (CRC)</option>
<option value="CZK">Czech Koruna (CZK)</option>
<option value="DKK">Danish Krone (DKK)</option>
<option value="EUR">Euro (EUR)</option>
<option value="GBP">Libra esterlina (GBP)</option>
<option value="USD">Dólar estadounidense (USD)</option>
<option value="MXN">Mexican Peso (MXN)</option>
<option value="PEN">Peruvian Peso (PEN)</option>
</select>
</form>
</section>
<section>
<form>
<h2> Vendor General Information</h2>
<label for="vendorLegalName">Vendor Legal Name:</label>
<input type="text" id="vendorLegalName" name="vendorLegalName" required><br><br>
<label for="vendorAddress">Vendor Address:</label>
<input type="text" id="vendorAddress" name="vendorAddress"><br><br>
<label for="vendorPhoneNumber">Vendor Phone:</label>
<input type="text" id="vendorPhoneNumber" name="vendorPhoneNumber"><br><br>
<label for="vendorEmail">Vendor Email:</label>
<input type="text" id="vendorEmail" name="vendorEmail" required><br><br>
<label for="vendorServices">Vendor Email:</label>
<input type="text" id="vendorServices" name="vendorServices" ><br><br>
</form>
</section>
<div class="myinput">
<input type="submit" value="Enviar">
</div>
</div>
</body>
</html>
Puedes ver mejor los resultados en éste enlace.