--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -223,16 +223,18 @@
   font-weight: bold;
 }
 
 .requests-list-status-code {
   margin-inline-start: 3px;
   padding: 0 2px;
   border-radius: 3px;
   font-family: var(--monospace-font-family);
+  /* prevent status code from having full line height width from .request-list-item */
+  line-height: normal;
 }
 
 .status-code[data-code^="1"] {
   background-color: var(--status-code-color-1xx);
 }
 
 .status-code[data-code^="2"] {
   background-color: var(--status-code-color-2xx);
@@ -398,17 +400,17 @@
   text-align: start;
 }
 
 .requests-security-state-icon {
   display: inline-block;
   width: 16px;
   height: 16px;
   margin: 0 4px;
-  vertical-align: top;
+  vertical-align: text-bottom;
 }
 
 .request-list-item.selected .requests-security-state-icon {
   filter: brightness(1.3);
 }
 
 .security-state-insecure {
   background-image: url(chrome://devtools/skin/images/security-state-insecure.svg);
@@ -622,16 +624,17 @@
   position: relative;
 /*
   display: table-row;
   Bug 1431132: Disabling this rule is surprising as we no longer have "rows".
   But this helps preventing reflowing the whole requests list anytime we append
   a new request/row.
 */
   height: 24px;
+  line-height: 24px;
 }
 
 .request-list-item.selected {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .request-list-item:not(.selected).odd {