alignment of elements in a button-CodePudding

I have a bootstrap drop down and on the button, I have a text and an icon. What I want is to align the text all the way to the left and align the icon all the way to the right without having to grid the button with other elements. Thanks in advance.

.dropdown {
  display: flex;
  width: 40%;
  height: 10vh;
  border: none;
}

.dropdown button {
  font-size: 1.8vw;
  color: #ffffff;
  width: 100%;
  height: 100%;
  border: none;
}

.dropdown button i {
  font-size: 1.8vw;
  margin: auto;
}

.dropdown button::after {
  display: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
    <button  type="button" data-bs-toggle="dropdown">
        drop me
        <i ></i>
    </button>
    <ul  aria-labelledby="dropdownMenuButton1">
        <li><a  href="#">Action</a></li>
        <li><a  href="#">Another action</a></li>
        <li><a  href="#">Something else here</a></li>
    </ul>
</div>

CodePudding user response：

Most of your CSS are not needed, you can use some of bootstrap's utility classes to achieve the expected result.

You don't have to use .dropdown button::after{} to remove bootstrap's default dropdown caret. Just remove .dropdown-toggle from the button.
You can then use this d-flex justify-content-between align-items-center class to align the text and the icon.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
    <button  type="button" data-bs-toggle="dropdown">
        drop me
        <i ></i>
    </button>
    <ul  aria-labelledby="dropdownMenuButton1">
        <li><a  href="#">Action</a></li>
        <li><a  href="#">Another action</a></li>
        <li><a  href="#">Something else here</a></li>
    </ul>
</div>