Inline Form

<!DOCTYPE html>
<title>My Example</title>

/* The core layout style for the form */
.inline-form {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line on small screens */
    align-items: flex-end; /* Aligns items along the bottom, great for varying label heights */
    gap: 15px; /* Creates space between form elements */
    justify-content: center;
}
.inline-form .form-group {
    display: flex;
    flex-direction: column; /* Stacks label on top of input */
}
.inline-form .form-group label {
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-weight: 500;
}
/* Style for visually hidden labels used in the second example */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.inline-form input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}
.inline-form .btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
</style>

<div class="inline-form-container">
    <p><strong>Example with visible labels:</strong></p>
    <form class="inline-form" action="#" method="post">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" class="btn">Login</button>
    </form>
</div>

<br>

<div class="inline-form-container">
     <p><strong>Example with placeholder text (more compact):</strong></p>
    <form class="inline-form" action="#" method="post">
        <div class="form-group">
            <label for="inline-email" class="sr-only">Email</label>
            <input type="email" id="inline-email" name="email" placeholder="Your Email" required>
        </div>
         <div class="form-group">
            <label for="inline-name" class="sr-only">Name</label>
            <input type="text" id="inline-name" name="name" placeholder="Your Name">
        </div>
        <button type="submit" class="btn">Subscribe</button>
    </form>
</div>