JSFiddle - React, Tailwind, and code Playground

HTML

<H3>
   Flexbox and "justify-content: space-between"
</H3>
<div id="testA">
	<div class="container">
		<span class="propertyName">color</span>
		<span class="propertyValue"><input type="color"></span>    
	</div>
	<div class="container">
		<span class="propertyName">backround-color</span>
		<span class="propertyValue"><input type="color"></span>
	</div>
	<div class="container">
		<span class="propertyName">border-color</span>
		<span class="propertyValue"><input type="color"></span>
	</div>
</div>

<H3>
   Flexbox and "flex: 1"
</H3>
<div id="testB">
	<div class="container">
		<span class="propertyName">color</span>
		<span class="propertyValue"><input type="color"></span>    
	</div>
	<div class="container">
		<span class="propertyName">backround-color</span>
		<span class="propertyValue"><input type="color"></span>
	</div>
	<div class="container">
		<span class="propertyName">border-color</span>
		<span class="propertyValue"><input type="color"></span>
	</div>
</div>

CSS

.container {
  border-style: solid;
  border-width: 1px;
  padding: 5px;
}

#testA .container {
  display: flex;
  justify-content: space-between;
}

#testA .propertyName,
#testA .propertyValue {
  background: yellow;
}

#testB .container {
  display: flex;
}

#testB .propertyName {
  flex: 1;
  background: yellow;
}