html – Alinear elementos en un div

Estoy intentando alinear los elementos de un div en mi pagina web para que estén a la misma altura, pero que los botones se encuentren pegados a la derecha.

Mi html:

<body>
    <div class="topMenu">
        <p>WEBISTE</p>
        <button>LOGOUT   <i class="fa fa-sign-out"></i></button>
        <button>REFRESH   <i class="fa fa-refresh"></i></button>
      </div>
</body>

Mi css:

    body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.topMenu {
    width: 90%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    list-style-type: none;
    background-color: rgb(124, 124, 124);
    overflow: hidden;
    display: flex;
    border-radius: 30px;
}

.topMenu p {
    font-size: 50px;
    color: darkblue;
    font-weight: bold;
}

.topMenu button {
    border-radius: 8px;
    border-color: black;
    background-color: rgb(195, 216, 255);
    text-decoration: black;
    font-size: 17px;
    height: 40px;
}

El problema que tengo es que los elementos del div no se posicionan en la misma linea imaginaria y el resultado se ve así:
introducir la descripción de la imagen aquí

También querría saber porque el cuadro que se crea del div es tan grande y como puede adaptarse al tamaño de los elementos.