I’m nearly finished with my MMM-Hive module, but just have one issue that I cannot get my head around.

With the current code, the layout looks like this:

Notice the snowflake icon is right next to the Frost Protect Enabled text.

I would like it to look like this (proper icon spacing next to the text and also in line with the icon above) :

This is the relevant code:

		var targetTemperatureRow = document.createElement("tr");
		if (this.config.showNext == true) {
		var targetTemperatureCell = document.createElement("td");
		targetTemperatureCell.colSpan = 5;	
			if (this.insideTarget >= 1) {
					targetTemperatureCell.innerHTML = "Frost Protect Enabled";
					targetTemperatureCell.className = "light dimmed xsmall";
					var frostCell = document.createElement("span");
					frostCell.setAttribute("aria-hidden","true");
					frostCell.className = "fa fa-snowflake-o";
					frostCell.style.cssText="color:white;";
					targetTemperatureCell.appendChild(frostCell);
					targetTemperatureRow.appendChild(targetTemperatureCell);
					}
			else {	
				targetTemperatureCell.innerHTML = this.config.targetTempText + " " + this.insideTarget + this.config.temperatureSuffix;
				targetTemperatureCell.className = "light xsmall";
				targetTemperatureRow.appendChild(targetTemperatureCell);
				}}

		table.appendChild(temperatureRow);
		table.appendChild(targetTemperatureRow);

I was looking at using flexbox, but I’m loathe to spend another x amount of hours and just want to get this module finished now :)

If anyone has any ideas on the above, it will be greatly appreciated, and might prevent me from pulling any more hair out!

Thanks