Split range into first/last

2 files changed, 23 insertions, 9 deletions

diff --git a/index.js b/index.js
index 293a0c0..2b4cbe1 100644
--- a/index.js
+++ b/index.js
@@ -44,9 +44,14 @@ class IPAddress extends React.Component {
     return block.mask
   }
 
-  getRange = () => {
+  getFirst = () => {
     var block = new Netmask(this.getPretty())
-    return block.first + ' - ' + block.last
+    return block.first
+  }
+
+  getLast = () => {
+    var block = new Netmask(this.getPretty())
+    return block.last
   }
 
   getCount = () => {
@@ -85,13 +90,17 @@ class IPAddress extends React.Component {
           <span className="value">{this.getNetmask()}</span>
           <span className="label">Netmask</span>
         </span>
-        <span className="range">
-          <span className="value">{this.getRange()}</span>
-          <span className="label">Range</span>
+        <span className="first">
+          <span className="value">{this.getFirst()}</span>
+          <span className="label">First IP</span>
+        </span>
+        <span className="last">
+          <span className="value">{this.getLast()}</span>
+          <span className="label">Last IP</span>
         </span>
         <span className="count">
           <span className="value">{this.getCount().toLocaleString()}</span>
-          <span className="label">Addresses</span>
+          <span className="label">Count</span>
         </span>
       </div>
 
diff --git a/style.scss b/style.scss
index 33d9731..c40dd7c 100644
--- a/style.scss
+++ b/style.scss
@@ -87,14 +87,19 @@ body {
     div.details {
       span.netmask {
         display: inline-block;
+        width: 20%;
       }
-      span.range {
+      span.first {
         display: inline-block;
-        margin-left: 3em;
+        width: 20%;
+      }
+      span.last {
+        display: inline-block;
+        width: 20%;
       }
       span.count {
         display: inline-block;
-        margin-left: 3em;
+        width: 20%;
       }
       span.value {
         font-size: modular-scale(1);