Как выровнять аватар с другими ссылками вправо?

Я видел несколько способов выровнять текст или даже изображение по правому краю, но когда я пытаюсь выровнять простой аватар с некоторым текстом, я не могу заставить его работать. Раньше это работало, пока я не переключился на material-ui-next, теперь я не могу заставить их правильно выровняться. Итак, у меня есть , но я хочу, чтобы Text1 располагался слева (как есть), а Text2 и аватар располагались рядом друг с другом и выровнялись по правому краю. Все в одной строке. Беллоу - это та часть рендеринга, которая у меня есть до сих пор, которая на самом деле менялась много раз, и в моем последнем испытании использовался <li>, хотя я не думаю, что мне это нужно в этом случае, но я открыт для предложений.

это рендер для верхнего контейнера:

  render() {
      return (

        <div className="main-container">
            <div className="links-container">
                <div className="logo-container">Text1</div>
                <div className="right-links-container">
                    <ul className="right-list-container">
                        <li><a href="">Text2</a>
                        </li>
                        <li><AccountInfo />
                        </li>
                    </ul>


                </div >
            </div>
        </div>
      );
    }
  }

это рендер аватара:

render() {
        return (

            <div className="profile-container">
                <Avatar
                    src="https://www.shareicon.net/data/2016/08/05/806962_user_512x512.png"
                    size={30}
                    onClick={this.handleAvatarClick}
                        />

                <Popover
                    open={this.state.showMenu}
                    anchorEl={this.state.anchorEl}
                    anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
                    targetOrigin={{horizontal: 'left', vertical: 'top'}}
                    onRequestClose={this.handleCloseAccountInfoMenu}
                >

                <MenuList role="menu">
                    <MenuItem >My account</MenuItem>
                    <MenuItem >Logout</MenuItem>
                  </MenuList>
                </Popover>
            </div>
        );
      }

и css:

.main-container {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%
}
.links-container {
    margin: 15px;
    text-align: right;
}
.logo-container {
    float: left;
}

.right-list-container a {
    text-decoration:none;
}
.right-list-container li:nth-child(1) {
    text-decoration:none;
    height:30px;
    display:block;
    background-position:right;
    padding-right: 15px;
}
ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.accountinfo-menu {
    width: 200px;
}
.profile-container {
    clear: both;
    vertical-align: middle;
    display: inline;
}

Я чувствую, что делаю слишком много, и я должен быть довольно простым, но я могу заставить это выглядеть так, как я хочу. Какие-либо предложения? Я могу легко реорганизовать все это, если я все делаю неправильно. Спасибо!