I'm having trouble aligning two elements in a flex box: What I want to happen is to have the "help" div to the very right then just left of that the "XX" div. I'm new to flex containers usually floating one elements right after the other would give the desired affect. Does anyone know how I can achieve this?
<html>
<head>
<style>
body {
margin:0;
padding:0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position:relative;
border-style: solid;
border-width: 1px;
height:36px;
padding:0;
margin:0;
background-color:black;
}
#menuContainer {
position:relative;
background-color:grey;
border-style: solid;
border-width: 1px;
padding:0;
width:96%;
height:98%;
margin: 0 auto;
display: flex;
}
#hh {
position:relative;
display:flex;
align-self: center;
font-size:14px;
width:80px;
border-style: solid;
border-width: 1px;
height:50%;
margin-left:auto;
}
#pp {
position:relative;
display:flex;
height:70%;
width:36px;
align-self: center;
justify-content: center;
margin-left: auto;
background-color:white;
border-style: solid;
border-width: 1px;
padding:0;
}
</style>
</head>
<body>
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp"> XX</div>
</div>
</body>
</html>
