JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottom-wrapper">
  <div class="widgets">Place Holder</div>
  <div class="widgets" id="settings">
    <span id="setting1">
            <div id="setting1-light">
                <!--?xml version="1.0" encoding="UTF-8"?-->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight">
                    <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(47, 222, 107)" cx="15" cy="15" r="12.5"></circle>
                </svg>
            </div>
            <p id="setting1-text">Setting1</p>
        </span>
    <span id="setting2">
            <div id="setting2-light">
                <!--?xml version="1.0" encoding="UTF-8"?-->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight">
                    <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(222,58,62)" cx="15" cy="15" r="12.5"></circle>
                </svg>
            </div>
            <p id="setting2-text">Setting2</p>
        </span>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}
.bottom-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.widgets {
  float: left;
  width: 87%;
}
#settings {
  width: 13%;
  margin-top: 5%;
}
#settings > span {
  /* Container */
  float: left;
  width: 100%;
  margin-top: 3%;
  position: relative; /* NEW */
}
#settings > span > div {
  /* SVG */
  float: left;
  height: 20%;
  width: 20%;
}
#settings > span > p {
  /* Text */
  float: left;
  height: 20%;
  width: 20%;
  margin-left: 5%;
  font-size: 1.2vw;
  
      position: absolute;  /* NEW */
    top: 23%;  /* NEW */
    left: 20%;  /* NEW */
  
  
}