How to align a column to the right in html

Question

I have created grid with a row including some input fields and now I need to create some buttons to the right of them, but I can't figure that out right.

This for responsive design and I can't find some resource that explain what I'm doing incorrectly.

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-md-3 col-lg-7">
            <h1>Select</h1>
            <div class="form-group">
                <input class="form-input " placeholder="balal" id="input-type-text2"
                value="" name="input-type-text" type="text">
            </div>
            <div class="form-group">
                <input class="form-input " placeholder="r" id="input-type-text4"
                value="" name="input-type-text" type="text">
            </div>
            <div class="form-group">
                <input class="form-input " placeholder="lalala" id="input-type-text6"
                value="" name="input-type-text" type="text">
            </div>
        </div>
        <div class="col-24 col-sm-16 col-md-6 col-lg-14">
            <div class="form-group">
                <input class="form-input " placeholder="align to the right" id="input-type-text6"
                value="" name="input-type-text" type="text">
            </div>
        </div>
    </div>
</div>

I expect the last col to align to the right

Answer 1

Change the class name

<div class="col-12 col-sm-4 col-md-4">
    <h1>Select</h1>
    <div class="form-group">
        <input class="form-input " placeholder="balal" id="input-type-text2"
        value="" name="input-type-text" type="text">
    </div>
    <div class="form-group">
        <input class="form-input " placeholder="r" id="input-type-text4"
        value="" name="input-type-text" type="text">
    </div>
    <div class="form-group">
        <input class="form-input " placeholder="lalala" id="input-type-text6"
        value="" name="input-type-text" type="text">
    </div>
</div>
<div class="col-12 col-sm-4 col-md-4">
    <div class="form-group">
        <input class="form-input " placeholder="align to the right" id="input-type-text6"
        value="" name="input-type-text" type="text">
    </div>
</div>

Answer 2

CSS Grid is perfect for responsive layouts.

You can declare the .container as display: grid and then you can define the columns and rows of your .container as:

• grid-template-columns: 50% 50%
• grid-template-rows: 100%

Working Example:

 .container { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 100%; } .right { justify-self: end; } input[type=text] { display: block; } 

 <h1>Select</h1> <div class="container"> <div class="container-column left"> <input type="text" placeholder="balal" /> <input type="text" placeholder="r" /> <input type="text" placeholder="lalala" /> </div> <div class="container-column right"> <input type="text" placeholder="align to the right" /> </div> </div>