Apologies for posting here I can’t in the other categories. Anyone know why ?
I have the following html in 2 responsiveGrid items.
How do I ensure the item height expands to fit ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Company Details</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
padding: 20px;
}
.company-details {
max-width: 600px;
width: 100%;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.company-details h1 {
text-align: center;
margin-bottom: 20px;
}
.form-row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 15px;
}
.form-row label {
flex: 0 0 30%;
max-width: 30%;
font-weight: bold;
margin-right: 10px;
}
.form-row input[type="text"] {
flex: 1 1 70%;
max-width: 70%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="company-details">
<h1>Company Details</h1>
<div class="form-row">
<label for="id">ID:</label>
<input type="text" id="id" name="id">
</div>
<div class="form-row">
<label for="companyName">Company Name:</label>
<input type="text" id="companyName" name="companyName">
</div>
<div class="form-row">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
</div>
<div class="form-row">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName">
</div>
<div class="form-row">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</div>
<div class="form-row">
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone">
</div>
<div class="form-row">
<label for="address">Address:</label>
<input type="text" id="address" name="address">
</div>
<div class="form-row">
<label for="city">City:</label>
<input type="text" id="city" name="city">
</div>
<div class="form-row">
<label for="state">State:</label>
<input type="text" id="state" name="state">
</div>
<div class="form-row">
<label for="postalCode">Postal Code:</label>
<input type="text" id="postalCode" name="postalCode">
</div>
<div class="form-row">
<label for="country">Country:</label>
<input type="text" id="country" name="country">
</div>
<div class="form-row">
<label for="website">Website:</label>
<input type="text" id="website" name="website">
</div>
</div>
</body>
</html>