Is there a way to align the form to the right in this code?
HTML
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap');
* {
font-family: "Noto Sans", sans-serif;
font-weight: 500;
}
.no-outline {
outline: none;
}
.no-select {
user-select: none;
}
.form-select {
width: 130px;
height: 40px;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aeccc1c1dadddadccbfbeeb389d79d798d7994dbded9ce9c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313667d637d637e3136273260">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>typing</title>
</head>
<body class="bg-light">
<div class="position-absolute top-50 start-50 translate-middle">
<div class="d-flex align-items-center">
<span class="fs-1 no-select" id="text">Lorem</span>
<select class="form-select float-end"> <!-- align this form to the right -->
<option selected>word</option>
<option>sentence</option>
</select>
</div>
<input type="text" class="bg-light fs-1 border-0 border-bottom no-outline" id="input">
</div>
<script src="script.js"></script>
</body>
</html>I am using Bootstrap version 5.0, so please incorporate Bootstrap if possible. Support for IE is not necessary!