GH-2022 Make radio button labels one line

app/panel/components/BuildingBlocks/RadioButtonGroup.jsx

@@ -23,20 +23,31 @@ import RadioButton from './RadioButton';
  */
 const RadioButtonGroup = (props) => {
 	const { indexClicked, handleItemClick } = props;
+
+	const labels = props.labels.map(label => (
+		<div key={label} className="RadioButtonGroup__label">
+			{t(label)}
+		</div>
+	));
+
+	const buttons = props.labels.map((label, index) => (
+		<div className="RadioButtonGroup__button">
+			<RadioButton
+				checked={index === indexClicked}
+				handleClick={() => handleItemClick(index)}
+			/>
+		</div>
+	));
+
 	return (
-		props.labels.map((label, index) => (
-			<div className="flex-container align-justify RadioButtonGroup__container" key={label}>
-				<span className="RadioButtonGroup__label">
-					{t(label)}
-				</span>
-				<div>
-					<RadioButton
-						checked={index === indexClicked}
-						handleClick={() => handleItemClick(index)}
-					/>
-				</div>
+		<div className="RadioButtonGroup__container">
+			<div className="flex-container align-justify RadioButtonGroup__labelContainer">
+				{labels}
+			</div>
+			<div className="flex-container align-justify RadioButtonGroup__buttonsContainer">
+				{buttons}
 			</div>
-		))
+		</div>
 	);
 };
 

app/scss/partials/_radio_button.scss

@@ -11,13 +11,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
+.RadioButtonGroup__container {
+	margin-top: 20px;
+	display: flex;
+}
+.RadioButtonGroup__labelContainer {
+	display: flex;
+	flex-direction: column;
+	margin-right: 15px;
+}
 .RadioButtonGroup__label {
-	margin-right: 10px;
 	font-weight: bolder;
+	margin-bottom: 15px;
 }
-.RadioButtonGroup__container {
-	margin: 16px 0;
-	width: 138px;
+.RadioButtonGroup__buttonsContainer {
+	display: flex;
+	flex-direction: column;
+}
+.RadioButtonGroup__button {
+	margin-bottom: 15px;
 }
 .RadioButton__outerCircle {
 	border: 1px solid #4a4a4a;