I am having trouble placing the * sign on the left side. Whenever I try to do so, it only works if I remove the row class.
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="{{ asset('themes/fontawesome/css/all.min.css') }}" rel="stylesheet">
</head>
<body>
<div id="showFilters">
<div class="position-relative row">
<i class="fas fa-times text-danger position-absolute end-0"></i>
<div class="col-md-4 mb-3">
<label for="name" class="form-label">نام فیلتر</label>
<input type="text" id="name" class="form-control" name="filters[1][name]">
</div>
<div class="col-md-4 mb-3">
<label for="latin" class="form-label">نام لاتین فیلتر</label>
<input type="text" id="latin" class="form-control" name="filters[1][latin]">
</div>
<div class="col-md-4 mb-3">
<label for="field" class="form-label">انتخاب فیلد</label>
<select id="field" class="form-select" name="filters[1][field]">
<option value="1">چک باکس</option>
<option value="2">رنگ</option>
<option value="3">آپشن</option>
</select>
</div>
</div>
</div>
</body>
</html>