With CSS and HTML how do I achieve my output this way - html

Question

I am trying to write some HTML that looks like this:
But what I currently have looks like this:
This my code:
<style>
div.relative {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.absolute {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
</style>
<div class='relative'>phone <b> 07010710811</b>
shot code <div class='absolute'> <b>123456 </b></div>
</div>";
What should I do to get my desired output?

Answer 1

I would create another div for your "shot code", and "phone" text. I've used similar properties to what you have been using before so that it should fall in line with the rest of your styling.
I would also consider renaming your div's to something that isn't a CSS property.
div.container {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.shot_code {
position: absolute;
top: 28px;
right: -2px;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
div.shot_text {
position: absolute;
top: 36px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
div.phone_text {
position: absolute;
top: 5px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
<div class='container'>
<div class='phone_text'>phone</div> <b> 07010710811</b>
<div class='shot_text'>shot code</div>
<div class='shot_code'> <b>123456 </b></div>
</div>

Answer 2

Assuming you can modify the HTML I would restructure it somewhat. That will make your life a lot easier when it comes to getting this styled right, and also styling it in the future.
.wrapper {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
}
.phone-num{
font-weight:bold;
margin-left: 45px;
}
.shot-code-num {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
.shot-code{
margin-top:20px;
margin-left:20px;
}
<div class="wrapper">
<div class='phone'>phone
<span class="phone-num">07010710811</span>
</div>
<div class="shot-code">
shot code
<div class='shot-code-num'> <b>123456 </b></div>
</div>
</div>
You can quite possibly also remove the absolute positioning as well, and replace it all with inline-blocks. It looks like you are going for something more like this:
.wrapper {
position: relative;
width: 300px;
border: 2px solid #73AD21;
text-align:right;
}
.field{
display:inline-block;
position:relative;
width:300px;
}
.field-label{
display:inline-block;
width:70px;
text-align:left;
padding:10px;
}
.field-value {
display:inline-block;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
<div class="wrapper">
<div class="phone field">
<span class="phone-label field-label">phone</span>
<span class="phone-value field-value">07010710811</span>
</div>
<div class="shot-code field">
<span class="shot-code-label field-label">shot code</span>
<span class="shot-code-value field-value">123456</span>
</div>
</div>
But I'm not sure what other requirements you have, so can't say for sure. You have a few options here. Hope some of it is helpful.

Answer 3

You could use float and with properties, like that :
.box{
float :left;
text-align: center;
width: 300px;
}
.top{
width: 100%;
}
.cut{
width: 50%;
float:left;
box-sizing: border-box;
}
.border{
width: 50%;
float:left;
}
<div class="box">
<div class="top">
Phone [phone]
</div>
<div class="cut">
shot code
</div>
<div class="cut border">
123456
</div>
</div>
Of course, you have to adapt this code to your case.