JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span class="input-group-btn">
	<button class="btn btn-default input-group-inline-btn" ng-disabled="ngDisabled" ng-click="isOpened = !isOpened" type="button">
		A
	</button>
	<ng-transclude ng-transclude-slot="thirdbutton"></ng-transclude>
</span>

<span class="input-group-btn">
	<button class="btn btn-default input-group-inline-btn" ng-disabled="ngDisabled" ng-click="isOpened = !isOpened" type="button">
		A
	</button>
	<ng-transclude ng-transclude-slot="thirdbutton">
		<third-button class="ng-scope">
			<button class="btn btn-default input-group-inline-btn" ng-disabled="ngDisabled" ng-click="isOpened = !isOpened" type="button">
				B
			</button>
		</third-button>
	</ng-transclude>
</span>

CSS

.input-group-btn {
	display: block;
	margin: 20px;
}

button {
	border-radius: 10px;
	border: none;
	background: #ddd;
	padding: 20px;
}

button + ng-transclude button {
	background: #f00;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	position: relative;
}

button + ng-transclude button::before {
	background: linear-gradient(90deg, #ddd 90%, #f00 90%);
	position: absolute;
	top: 0;
	left: -20px;
	width: 20px;
	bottom: 0;
	content: "";
}