JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<ul class="breadcrumbs">
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>lorem ipsum dolor sit amet</li>
		<li>lorem ipsum dolor sit amet</li>
	</ul>
	<div class="content"></div>
</div>
<hr />
<div class="wrapper">
	<ul class="breadcrumbs">
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>lorem ipsum dolor sit amet</li>
		<li>lorem ipsum dolor sit amet</li>
	</ul>
	<div class="content content1"></div>
</div>

CSS

body { text-align: center; }
.wrapper { display: inline-block; min-width: 400px; text-align: left; border: 1px solid #000; }
.breadcrumbs { background-color: #ddd; list-style: none; margin: 0; padding: 0; }
.breadcrumbs > li { display: inline; }
.breadcrumbs > li:before { content: ' > '; }
.breadcrumbs > li:first-child:before { content: ''; }
.content { width: 400px; height: 100px; background: #aaa; }
.content1 { width: 500px; }