How to align avatar with other links to the right?

Question

I have seen several ways to align text or even an image to the right, but when i try to align a simple avatar with some text, i cant get it to work. It actually used to work until I switched to material-ui-next, now I can't get them to align properly. So what I have is but I want to have Text1 on the left (like it is) and Text2 and the Avatar next to each other, and aligned on the right. All in the same line. Bellow is the render part I have so far, which was actually different many times, and my last trial was using <li>, although I don't think I need it in this case, but I open to suggestion.

this is the render for the top container:

  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>
      );
    }
  }

this is the render for the avatar:

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>
        );
      }

and the 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;
}

I feel like I am doing too much and I should be rather simple, but I can get it to look the way I want. Any suggestions? I can easily refactor this whole thing if I am doing it all wrong. Thank you!

Answer 1

Here is a short snippet using flexbox. I think this is what you need.

render() {
      return (

        <div className="main-container">
            <div className="links-container flexbox">

                <div className="logo-container">Text1</div>

                <div className="right-links-container">
                    <ul className="right-list-container flexbox">
                        <li><Avatar /></li>
                        <li><a href="">Text2</a></li> 
                    </ul>
                </div>

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

CSS:

    .flexbox{
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
    }



 .links-container{
    align-items:center;
    width:100%;
    }

    .logo-container{
    width:auto;
    }

    .right-list-container{
    margin-left:auto;
    width:auto;
    align-items:center;
    }

    .right-list-container li{
    margin-right:10px;
    }

checkout the demo here: