<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> </form> </div> </div> <div class="col-25"> <div class="container"> <h4>Carrinho <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4> <p><a href="#">Product 1</a> <span class="price">$15</span></p> <p><a href="#">Product 2</a> <span class="price">$5</span></p> <p><a href="#">Product 3</a> <span class="price">$8</span></p> <p><a href="#">Product 4</a> <span class="price">$2</span></p> <hr> <p>Total <span class="price" style="color:black"><b>$30</b></span></p> </div> </div> </div>

{ font-family: Arial; font-size: 17px; padding: 8px; } * { box-sizing: border-box; } .col-25 { -ms-flex: 25%; /* IE10 */ flex: 25%; } .col-25, .col-50, .col-75 { padding: 0 16px; } .container { background-color: #f2f2f2; padding: 5px 20px 15px 20px; border: 1px solid lightgrey; border-radius: 3px; } .icon-container { margin-bottom: 20px; padding: 7px 0; font-size: 24px; } .btn:hover { background-color: #45a049; } a { color: #2196F3; } hr { border: 1px solid lightgrey; } span.price { float: right; color: grey; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */ @media (max-width: 800px) { .row { flex-direction: column-reverse; } .col-25 { margin-bottom: 20px; } }