<!-- More details in this article:
https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5 -->

<label>
	<span>Input using <code>em</code> spacing</span>
	<input type="text" placeholder="Input">
</label>

<button role="button">Button</button>
$font-size: 1.25em;

body {
	padding: 2rem;
}

label {
	font-size: $font-size;
	color: rebeccapurple;
	
	span {
		display: block;
		
		// em spacing
		margin-bottom: .5em;
	}
	
	input {
		// em spacing
		padding: .25em;
		border-radius: .25em;
		
		border: 2px solid rgba(black, 0.54);
	}
}

button {
	font-size: $font-size;
	
	// em spacing
	padding: .25em .75em;
	border-radius: .25em;
		
	color: #fff;
	background-color: rebeccapurple;
	border: 2px solid rebeccapurple;
	cursor: pointer;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.