<div dir="ltr">
	<div class="container">
		<div class="logo">LOGO</div>
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
</div>

<br />

<div dir="rtl">
	<div class="container">
		<div class="logo">LOGO</div>
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
</div>
@mixin dir($dir: "rtl") {
	[dir="#{$dir}"] & {
		@content;
	}
}

.container {
	position: relative;
	display: flex;
	gap: 10px;

	.logo {
		position: absolute;
		text-align: center;
		line-height: 40px;
		width: 60px;
		height: 40px;
		background: LightGreen;
		border-bottom-right-radius: 6px;
		top: 0;
		left: 0;

		@include dir {
			left: unset;
			right: 0;
			border-bottom-right-radius: unset;
			border-bottom-left-radius: 6px;
		}
	}

	.item {
		font-size: 3em;
		flex-basis: 150px;
		height: 150px;
		background: LightCoral;
		text-align: center;
		line-height: 150px;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.