How can I make button go right, fix middle section and make everything resizible

Question

I have a 3 sections in my html

textarea
lable and below 2 buttons
road button

How can I make everything resizible and have seconds section fixed so it doesn't resize (label and below 2 buttons) and have 3 button Road go on the right and doesn't move, it should be fixed.

So in the nutshell, textarea should be resizible and seconds section and button the right should be fixed.

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="main_section" class="container"> <div class="cstm-item d-flex"> <div class=""> <textarea name=""></textarea> </div> <div class="h-100 text-center"> <span>LEFT RIGHT</span> <div> <button><i class="fa fa-minus"></i></button> <button><i class="fa fa-plus"></i></button> </div> </div> </div> <div> <button><i class="fa fa-road"></i></button> </div> </div> </body> </html>

Answer 1

This solution would work. Let me know if there is anything wrong in UI alignment.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <style>
        .solution {
            display: flex;
            align-items: center;
        }
        .solution > div {
            padding: 0 10px;
        }
        .solution > div:first-of-type {
            flex-grow: 1;
        }
        textarea {
            width: 100%;
        }
        
    </style>
    <body>
        <div id="main_section" class="container">
            <div class="solution">
                <div>
                    <textarea class="item-text-area" name=""></textarea> 
                </div>
                <div>
                    <span>LEFT RIGHT</span>                 
                    <div>
                        <button><i class="fa fa-minus"></i></button>
                        <button><i class="fa fa-plus"></i></button>
                    </div>
                </div>       
                <div>
                    <button><i class="fa fa-road"></i></button>
                </div>       
            </div>  
        </div>
    </body>
</html>

How can I make button go right, fix middle section and make everything resizible

Question

1 answers

solution1
2 ACCPTED 2020-10-17 14:56:32

How can I make button go right, fix middle section and make everything resizible

Question

1 answers

solution1 2 ACCPTED 2020-10-17 14:56:32

solution1
2 ACCPTED 2020-10-17 14:56:32