diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index c5f775e..33e03f0 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -249,6 +249,7 @@ span.signal-unit::after {
     width: 100%;
     height: 100%;
     display: flex;
+    flex: none;
 
     word-wrap: break-word;
 }
diff --git a/src/widget/widgets/value.js b/src/widget/widgets/value.js
index 77dab50..8951d80 100644
--- a/src/widget/widgets/value.js
+++ b/src/widget/widgets/value.js
@@ -68,13 +68,16 @@ class WidgetValue extends Component {
   }
 
   render() {
-    let unit = " [" + this.state.unit + "]";
     let value_to_render = Number(this.state.value);
+    let value_width = this.props.widget.customProperties.textSize*0.55* (this.state.value.length +2);
+    let unit_width = this.props.widget.customProperties.textSize*2;
     return (
       <div className="single-value-widget">
-        <strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px' }}>{this.props.widget.name}</strong>
-        <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px'}}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}
-        {this.props.widget.customProperties.showUnit && unit }</span>        
+        <strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px'}}>{this.props.widget.name}</strong>
+        <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px',width: value_width }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
+        {this.props.widget.customProperties.showUnit &&
+          <span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', width: unit_width}}>[{this.state.unit}]</span>
+        }    
       </div>
     );
   }