Flexbox を利用して、要素を中央と右端に表示してみます。
parent クラスで display: flex としているので、justify-content に center とすることで、子要素(メインアイテム)を中央表示にしています。
item クラスで position: absolute としているので、子要素(メニュー)は 常に右端にくっついています。また、parent クラスで position: relative としているので、子要素(メニュー)は親要素の中で絶対位置の計算が行われます。
イメージ
CSS
<style> .parent { position: relative; display: flex; justify-content: center; border: black solid 1px; padding: 20; } .item { display: flex; margin: 3px; padding: 15px; border: black solid 1px; } .menu { position: absolute; right: 0; margin: 3px; padding: 15px; border: black solid 1px; } </style>
HTML
<div class="parent"> <div class="item">メインアイテム</div> <div class="item">メインアイテム</div> <div class="menu">メニュー</div> </div>