When viewing on larger screens, the button aligns with the text box in the same line. However, on smaller screens when zoomed in, I want the button to appear below the text box while maintaining the same width. I've been struggling to make it work properly. Here is the code that I have:
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0e140f1409">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<form method="GET" id="target" class="form-inline justify-content-center">
<div class="form-row justify-content-center text-center">
<div class="form-group form-inline">
<input type='text' class ='form-control mb-2 mr-sm-2 mb-sm-0 input-group' id='keyword' maxlength='25' placeholder="Text">
</div>
<input type="submit" class="btn btn-primary input-group mb-2 mr-sm-2 mb-sm-0 text-center rounded-0 justify-content-center" value="Text">
</div>
</form>
</body>
</html>