JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mainInfo">
    
    </div>
    <div class="mainScr">
      <div id="visual" class="screenParts">
        <div class="graphicsPanel">
          <div class="displayValues">
            <p id="uxTitleLabl_xTFA" class="displayText">ParamName</p>
            <p id="uxValueLabl_xTFA" class="displayText">Value</p>
            <p id="uxTimerLabl_xTFA" class="displayText">Rx. Time</p>
          </div>
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 400 400.00001"
   id="svg8121"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="simpleCircle.svg">
  <defs
     id="defs8123" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.98994949"
     inkscape:cx="63.477956"
     inkscape:cy="240.33431"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:window-width="1600"
     inkscape:window-height="878"
     inkscape:window-x="1592"
     inkscape:window-y="892"
     inkscape:window-maximized="1">
    <sodipodi:guide
       position="30.304576,329.30974"
       orientation="1,0"
       id="guide12601" />
    <sodipodi:guide
       position="30.304576,370.72599"
       orientation="0,1"
       id="guide12603" />
    <sodipodi:guide
       position="30.304576,29.294425"
       orientation="0,1"
       id="guide12605"...

CSS

body {
  background-color: #efefef;
  font-family: sans-serif;
  text-align: left;
  padding: 20px 0 0 20px;
}

.mainScr {
  max-width: 1500px;
  margin: 1px;

}

.mainInfo {
  background-color: #D4FCD5;
  min-width: 495px;
  max-width: 1470px; 
  min-height: 100px;
  border: 1px double green;
}
.screenParts {
  vertical-align: top;
  width: 49%;
  max-width: 730px;
  min-width: 495px;
  min-height: 450px;
  border: 1px solid white;
  background: #F7E7C4;
  margin: 1px;
  display: inline-block;
}

.displayText {
  text-align: center;
  font-size: 0.8em;
  line-height: 0.75em;
  margin: 0.5em;
}    

.graphicsPanel {
  width: 100%;
  height: 66%;
  border: 1px solid blue;
  background: lightblue;
}

.displayValues {
  /*this combination works better along x, but not good along
  position:relative;
  top: 50%;
  left: 50%;                 
  transform: translateX(-50%) translateY(+50%);
  transform: translateX(-50%) translateY(+600%);*/



  /* this combination keeps target in the middle of the screen!*/
  position:absolute;
  transform: translateX(-50%) translateY(-50%);
  /*z-index: 99; //this has no effect  */                
  top: 50%;
  left: 50%;

}