How to dynamically change width and height using alignment

Question

I am having some problems. When I write text in the input field, writing text shows another text. The other width and height of the text field does not change dynamically with alignment, as shown below, and the demo site

My demo site

Default Width and Height

But I want this desired result Link required output

For desired output like these and demo sites

I ran into another problem whose height is shown at the top of the window. But the height should indicate the left or right position of the box.

The inside opening of the box is another problem that I do not turn on my box.

, .

<div class="text_input1">
    <p class="label1"> Text 1 <input class="input_box1" type="text" id="text11" name="text11" value="Enter Text1"></p>
</div>

 <div class="text_input1">
<p class="label1"> Text 2 <input class="input_box1" type="text" id="text22" name="text22" value="Enter Text2"></p>
</div>

<div class="text_input1">
<p class="label1"> Text 3 <input class="input_box1" type="text" id="text33" name="text33" value="Enter Text3"></p>
</div>

</div>

<h2 class="shape_text_width">WIDTH:</h2>
<div class="iteam_icon2">

<input type="text" id="width" name="width" value="79" onchange="XX()"><p class="mili1">mm</p</input>

</div>
<h2 class="shape_text_width">HEIGHT:</h2>
<div class="iteam_icon2">

    <input type="text" id="height" name="height" value="26" onchange="XX1()"><p class="mili1">mm</p></input>

</div>

$( "#width_label" ).text(79 + " mm");
$("#height_label" ).text( 26 + " mm");

function XX()
{
    var first2 =document.getElementById("width").value;
      var width=first2;
      var width_in_px=width*3.779527559;
      var total_width = Math.round(width_in_px);
      var f_width_in_px = parseInt(total_width);

      var mm_text="mm";

      $('#mySVG1').css("width", f_width_in_px + "px");
      $('#shape1').css("width", f_width_in_px + "px");
      $( "#width_label" ).text( width + " mm");
      $('#width_label').css("width", f_width_in_px + "px");

      var dif=width-300;
      if(width>300)
      {
      $('#height_label').css("margin-right", dif + "px");
      }

} 

 function XX1()
{
    var first22 =document.getElementById("height").value;


      var height=first22;
      var height_in_px=height*3.779527559;
      var total_height = Math.round(height_in_px);
      var f_height_in_px = parseInt(total_height);

      $('#mySVG1').css("height", f_height_in_px + "px");
      $('#shape1').css("height", f_height_in_px + "px");
      $("#height_label" ).text( height + " mm");
      $('#height_label').css("width", f_height_in_px + "px");

}

, My OutPut

<div class="label_fix" id="height_label" style="border-bottom: 1px solid #000;
   width:100px;
   margin: 0 auto;
   margin-bottom: 5px;
   padding: 2px;">
</div>

<svg  style="width:300px;height:100px" id="mySVG1">
     <rect id="shape1" x="0" y="0" style="width:300px;height:100px" stroke="black" stroke-width="1px" fill="white"/>
     <<text id="text1" x="50%" y="25%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
     <<text id="text2" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
     <<text id="text3" x="50%" y="75%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 

</svg>

<div class="label_fix" id="width_label" style="border-top: 1px solid #000;
   width: 300px;
   margin: 0 auto;
   margin-top: 5px;
   padding: 2px;">
</div>

<script>
$( "#text11" )
  .keyup(function(test1) {
    var value = $( this ).val();
    $( "#text1" ).text( value );
    $( "#text_second_1" ).text( value );
    $( "#text_third_1" ).text( value );

  })
</script>
<script>
$( "#text22" )
  .keyup(function(test2) {
    var value = $( this ).val();
    $( "#text2" ).text( value );
    $( "#text_second_2" ).text( value );
    $( "#text_third_2" ).text( value );

  })
</script>
<script>
$( "#text33" )
  .keyup(function(test3) {
    var value = $( this ).val();
    $( "#text3" ).text( value );
    $( "#text_second_3" ).text( value );
    $( "#text_third_3" ).text( value );

  })
</script>

Answer 1

, css. , , , px, , .

, , div . "", :before :after.

body {
  background:#ccc;
}
.box {
  box-sizing:border-box;
  background:#fff;
  width:99px;
  border-radius:5px;
  text-align:center;
  padding:7px 0;
  position:relative;
  border:1px solid #000;
  font-size:14px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:5px;
  display:block;
  width:8px;
  height:8px;
  background:#ccc;
  border-radius:50%;
  top:50%;
  margin-top:-5px;
  border:1px solid #000;
}
.box:after {
  left:auto;
  right:5px;
}

. https://jsfiddle.net/s6r6frgx/2/