Get rid from the text indentation [duplicate] - css

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
How could I get rid from the text indentation in my case?
html:
<div class="mainContainer">
<div class="promptTitle">
Module Name
</div>
<div class="drawRegion">
</div>
<div class="nameTitle">
Module Name
</div>
</div>
css:
.mainContainer {
border: 1px darkgray solid;
border-radius: 10px;
}
.promptTitle {
color: #b8b8b8;
padding-top: 25px;
padding-left: 70px;
}
.drawRegion {
display: inline-block;
width: 50px;
margin-right: 0;
}
.nameTitle {
display: inline-block;
padding-left: 20px;
}
jsfiddle:
https://jsfiddle.net/76uedo40/561/
problem on screenshot:
My problem is that the second line of text Module Name is displayed with an indentation. I would expect to not have the indentation.
That is because the first Module Name indented 70px from left, while the second Module Name indented 50px from left due to the element with class="drawRegion" and 20px due to its own left padding. So, in total both first and second Module Name should indent 70px. And hence both should be placed with the same indentation, but this is not the case.
So, what am I missing here or what am I doing wrong?

Answer 1

Try removing the spacing between the drawRegion & nameTitle inline-block divs.
.mainContainer {
border: 1px darkgray solid;
border-radius: 10px;
}
.promptTitle {
color: #b8b8b8;
padding-top: 25px;
padding-left: 70px;
}
.drawRegion {
display: inline-block;
width: 50px;
margin-right: 0;
}
.nameTitle {
display: inline-block;
padding-left: 20px;
}
<div class="mainContainer">
<div class="promptTitle">Module Name</div>
<div class="drawRegion"></div><div class="nameTitle">Module Name</div>
</div>
Check this answer for a good explanation of white space between inline & inline-block elements.

Answer 2

There's no point in making the nameTitle as inline-block as you display the elements as blocks.
Therefore, keep the same CSS styles for the first and the last element.
.nameTitle {
display: block;
padding-left: 70px;
}