How render text correctly inside a Div?

Question

In the following example you can see that 'c' and 'x' going out from the div how to place correctly inside the div?

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Answer 1

Line-height and text-align works perfectly fine. As text are not defined inside any tag we have to align it using line-height,

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
  line-height:7px;/*Add this*/
  text-align:center;/*Add this*/
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Answer 2

line-height = height of the area will work well..

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  line-height: 10px;
  height: 10px;
  margin: 3px;
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Answer 3

Add line-height to the .controls.

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
  line-height: 9px; /* added here */
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Answer 4

I guess this is something to do with line-height, so add line-height: 0.3 to the .controls:

.d {
  padding-left: 20px;
  border-left-width: 2px solid;
  border-left-style: solid;
  border-left-color: rgb(255, 0, 0);
  border-top-width: 2px solid;
  border-top-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-bottom-width: 2px solid;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 0, 0);
  display: inline-block;
  height: 30px;
  position: relative;
  background-color: 'white';
}
.controllContainer {
  position: absolute;
  top: 0px;
  left: 0px;
}
.controls {
  border: 1px solid;
  width: 10px;
  height: 10px;
  margin: 3px;
  line-height: 0.3;
}

<div class="d " style="">
  test text
  <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round">

    </polyline>
  </svg>
  <div class="controllContainer">
    <div class="controls">c</div>
    <div class="controls">x</div>
  </div>
</div>

Preview

You might need to tweak a little bit to get it right. Coz it works fine in Firefox, and shows like the above image in Chrome.