How to place logo in right side of the navigation bar?

Hi I am working on designing navigation bar. I want to keep application name in left side and logo in right side. Before to logo I want to keep one drop-down. I tried as below.

.navbar {
    overflow: hidden;
    background-color: #333;
}

    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbtn {
      display: block; 
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.dropdown:hover .dropdown-content {
    display: block;
}
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
</head>
<body>
<div class="navbar" >
                <div class="navbar navbar-light" style="backgroundColor:#483D8B">
                <a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>

                <div class="dropdown">
                    <button class="dropbtn">Dropdown
                    
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div> 
                <a class="navbar-brand navbar-right" href="#">
                    <img alt="CompanyLogo" src={profilePageImage} />
                </a>
                </div>
            </div>
            </body>
</html>

I am not able to design it in the way I want. Always project name, dropdown and logo comes one after the other but I want dropdown and logo in full right side. Can someone help me to figure it out. thanks

Solution

I hope this is what u r expecting:

Create a new div(right side content) and wrap the dropdown div and company logo into that div. Then add flex and space-between property to the navbar div.

.navbar {
  overflow: hidden;
  width: 100%;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.right-side-content {
  display: flex;
  align-items: center;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar-brand {
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, .9);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" </head>

  <body>
    <div class="navbar">
      <div class="navbar navbar-light" style="backgroundColor:#483D8B">
        <a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>

        <div class="right-side-content">
          <div class="dropdown">
            <button class="dropbtn">Dropdown
                    
                    </button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
          <a class="navbar-brand navbar-right" href="#">
            <img alt="CompanyLogo" src="https://dummyimage.com/40x40/fff/000?text=logo" />
          </a>
        </div>

      </div>
    </div>
  </body>

</html>