diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index 321a6eda07..0914d065bb 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -70,8 +70,8 @@
   width: 12px;
   height: 12px;
   border-radius: 6px;
-  vertical-align: text-top;
   margin-right: 2px;
+  align-self: center;
 }
 
 .green-circle::before {
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 61355d3144..79594fb8c4 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -80,8 +80,10 @@ const RequestTab: React.FunctionComponent<{
     <div className='network-request-details-header'>General</div>
     <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
     <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
-    <div className='network-request-details-general'>Status Code: <span className={statusClass(resource.response.status)}>
-      {`${resource.response.status} ${resource.response.statusText}`}</span></div>
+    <div className='network-request-details-general' style={{ display: 'flex' }}>
+      Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
+        {`${resource.response.status} ${resource.response.statusText}`}
+      </span></div>
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
     {requestBody && <div className='network-request-details-header'>Request Body</div>}