keep space between div's - html

Question

I want show a html div wich contains a state-descritpiton with a circle (green or red). This circle shows the state of the enigne in the right corner of the description.
My problem is the following. If the windows size has changed (smaler), the description and the "state-circle" overlap each other.
How can i prevent this?
Do you know how the css-code should be?
structure is mainly this:
.statusdiv{
height: 40px;
}
.statusbeschreibung{
position: absolute;
margin-left: 40%;
}
.statuskreis {
position: absolute;
width: 25px;
height: 25px;
top: 13px;
/*left: 190px;*/
margin-left: 60%;
border: 1px solid black;
text-align: center;
border-radius: 12.5px;
}
.status-on{
background-color: green;
}
.status-off{
background-color: red;
}
<div class="list-block">
<ul>
<li>
<div class="statusdiv">
<p class="statusbeschreibung">Motorstatus</p>
<div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div>
</div>
</li>
</div>

Answer 1

This was based on your original screenshot images of your code: basically you should use display:inline-block instead of position:absolute to prevent your bullet from overlapping your text, and then use a margin-left on the bullet so that it always has enough space between it and the text.
.list-block ul {
padding: 0;
margin: 0;
}
.list-block li {
list-style: none;
}
.statusdiv {
white-space: nowrap;
}
.statusbeschreibung {
margin-left: 40%;
display: inline-block;
vertical-align: middle;
}
.statuskreis {
width: 25px;
height: 25px;
margin-left: 10px;
border: 1px solid black;
text-align: center;
border-radius: 12.5px;
display: inline-block;
vertical-align: middle;
}
.status-on {
background-color: green;
}
.status-off {
background-color: red;
}
<div class="list-block">
<ul>
<li>
<div class="statusdiv">
<p class="statusbeschreibung">Motorstatus</p>
<div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div>
</div>
</li>
<li>
<div class="statusdiv">
<p class="statusbeschreibung">Motorstatus</p>
<div name="motorstatus" id="motorstatus" class="item-link statuskreis status-on"></div>
</div>
</li>
</ul>
</div>

Answer 2

If I'm understanding it correctly, you style the circle with the class "motortatus".
Try to set the width and height in percentages, not in pixels. This should resize the status circle and prevent it from overlapping with the description, except the font of the description doensn't resize at all and fills up the whole div.

Answer 3

I love inline lists for this sort of thing, but you can also do columns in your preferred css framework of choice.
I've styled it so each of the two list items is 50% of the width of the ul container, but you can tweak those as you see fit.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.statusdiv {
list-style: none;
float: left;
margin: 0;
padding: 1em;
width: 100%;
color: #2d2d2d;
}
.statusdiv li {
width: 50%;
float: left;
padding: 0 1em;
}
.statusdiv li:first-child {
text-align: right;
height: 35px;
line-height: 35px;
}
.statusdiv li:last-child {
text-align: left;
}
.circle {
content: "";
background-color: aqua;
width: 35px;
height: 35px;
display: inline-block;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
<!-- EDIT THIS SNIPPET -->
<ul class="statusdiv">
<li>
Status thing:
</li>
<li><span class="circle"></span></li>
</ul>