<div class="box"></div>
<div class="another-box"></div>
* {
	box-sizing: border-box;
}

body {
	padding: 0.5rem;
	display: flex;
	flex-wrap: wrap;
}

.box {
	width: 50%;
	height: 200px;
	background-color: #093148;
	border: 0.5rem solid white;
	transition: width .3s ease-out;
}

.another-box {
	width: 30%;
	height: 200px;
	background-color: #30aef8;
	border: 0.5rem solid white;
}
View Compiled
(() => {
	const box = document.querySelector('.box');
	setInterval(() => {
		box.style.width = '';
		setTimeout(() => {
			box.style.width = '70%';
		}, 500);
	}, 4000);
})()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.