diff --git a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
index 902aeb889e..25376dceac 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@@ -12,9 +12,15 @@
   }
 
   @media screen and (min-width: $break-md) {
+    // This details tab must be selected to use these grid stylings. They are
+    // irrelevant for the other tabs.
     &__details-panel.react-tabs__tab-panel--selected {
-      // Must be selected to show grid
-      grid-template-columns: repeat(2, 1fr);
+      // We want the grid to be 2 columns on medium and larger screens and for
+      // those two columns to always be equal width and take up half the
+      // available space. We use 50% here instead of 1fr as there were some
+      // issue with the tooltips in some of the cards forcing the card to be
+      // wider then half the available space.
+      grid-template-columns: repeat(2, 50%);
     }
 
     // these are used for positiong the cards in the grid. place these classes
diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx
index 821664d90b..aa0f21c73d 100644
--- a/frontend/pages/hosts/details/cards/About/About.tsx
+++ b/frontend/pages/hosts/details/cards/About/About.tsx
@@ -60,14 +60,17 @@ const About = ({
           title="Serial number"
           value={<TooltipTruncatedText value={aboutData.hardware_serial} />}
         />
-        <DataSet title="Private IP address" value={aboutData.primary_ip} />
+        <DataSet
+          title="Private IP address"
+          value={<TooltipTruncatedText value={aboutData.primary_ip} />}
+        />
         <DataSet
           title={
             <TooltipWrapper tipContent="The IP address the host uses to connect to Fleet.">
               Public IP address
             </TooltipWrapper>
           }
-          value={aboutData.public_ip}
+          value={<TooltipTruncatedText value={aboutData.public_ip} />}
         />
       </>
     );
@@ -163,7 +166,7 @@ const About = ({
       includeShadow
     >
       <CardHeader header="About" />
-      <div className="info-flex">
+      <div className={`${baseClass}__info-grid`}>
         <DataSet
           title="Added to Fleet"
           value={
diff --git a/frontend/pages/hosts/details/cards/About/_styles.scss b/frontend/pages/hosts/details/cards/About/_styles.scss
index 18e5c2622d..a56334d2ed 100644
--- a/frontend/pages/hosts/details/cards/About/_styles.scss
+++ b/frontend/pages/hosts/details/cards/About/_styles.scss
@@ -34,40 +34,20 @@
     }
   }
 
-  // Adjusts for edge cases of extra long MDM server URL and used by email
-  .info-flex {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+  // we want the info section data to be displayed in a grid. This grid
+  // will be responsive and adjust the number of columns based on the
+  // screen width. We want the columns to only be as wide as the longest
+  // item in that column. when a item is too long to fit in the
+  // column we will truncate the text for that item. This is done with the
+  // TooltipTruncatedText component.
+  &__info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(150px, max-content));
     gap: $pad-medium $pad-xxlarge;
-    max-height: 350px;
-    align-content: flex-start;
 
-    .data-set {
-      min-width: none;
-    }
-
-    dd,
-    .component__tooltip-wrapper__element {
-      max-width: 350px;
-    }
-
-    @media (min-width: $break-md) {
-      max-height: 250px;
-
-      dd,
-      .component__tooltip-wrapper__element {
-        max-width: 245px;
-      }
-    }
-
-    @media (min-width: $break-lg) {
-      max-height: 200px;
-
-      dd,
-      .component__tooltip-wrapper__element {
-        max-width: 500px;
-      }
+    // at the larger screen widths we want to have 3 columns.
+    @media (min-width: $break-xxl) {
+      grid-template-columns: repeat(3, minmax(150px, max-content));
     }
   }