Struggling to align the two fields, "Currency I Want" and "Amount," from left-bottom to right-top in Bootstrap 5. Hours have been spent trying to figure it out with no success. Can anyone provide assistance?
[1]: https://i.sstatic.net/0Yjdu.jpg [1]
Below is the code snippet:
return (
<div className="card card-body p-3 mb-2 bg-light text-dark">
<h1>Currency Converter</h1>
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label>Currency I have:</label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div className="form-group col-md-4">
<label>Amount:</label>
<input type="number" className="form-control"/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-4">
<label>Currency I Want:</label>
<select className="form-select" type="text" >
<option value="1" selected >USD</option>
<option value="2">EUR</option>
<option value="3">GBP</option>
</select>
</div>
<div className="form-group col-md-4">
<label>Amount:</label>
<input type="number" className="form-control"/>
</div>
</div>
<button type="submit" className="btn btn-secondary mb-2">Convert</button>
</form>
</div>
);