Set two buttons below the input field aligned on both sides

February 9, 2024

I’m trying to create a simple page using CSS and HTML, but I can’t seem to align the elements the way I want. I have one input element and two buttons, I want the buttons to be below the input element, one button aligned with the left side of the input element and the other button with the right side of the input element.

No matter what I do, I can’t get it to work. I will provide a code and screenshot if anyone can help me I would be grateful, thank you in advance!

Image link

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word_game</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="game_container">
        <h1 class="game_title">Word Game</h1>
        <div class="input_container">
            <input type="text" id="word_input" placeholder="Enter your word">
            <button class="btn" id="submit_btn">Submit</button>
            <button class="btn" id="get_letter_btn">Get Letter</button>
        </div>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #1B1212;
    margin: 0;
    padding: 0;
}

.game_container {
    width: 80%;
    margin: 50px auto;
    background-color: #36454F;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.game_title {
    text-align: center;
}

.input_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.input_container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; 
}

.btn#submit_btn {
    margin-right: auto; 
}

.btn#get_letter_btn {
    margin-left: auto; 
}

>Solution :

Take a look at this class:

.input_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

Added: flex-wrap: wrap and justify-content: space-between

Removed: flex-direction: column

body {
    font-family: Arial, sans-serif;
    background-color: #1B1212;
    margin: 0;
    padding: 0;
}

.game_container {
    width: 80%;
    margin: 50px auto;
    background-color: #36454F;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.game_title {
    text-align: center;
}

.input_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.input_container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; 
}

.btn#submit_btn {
    margin-right: auto; 
}

.btn#get_letter_btn {
    margin-left: auto; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word_game</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="game_container">
        <h1 class="game_title">Word Game</h1>
        <div class="input_container">
            <input type="text" id="word_input" placeholder="Enter your word">
            <button class="btn" id="submit_btn">Submit</button>
            <button class="btn" id="get_letter_btn">Get Letter</button>
        </div>
    </div>
</body>
</html>