Html table like structure without table - html

Question

I am trying to create 2 column table like structure without using <table> , Here in 2nd column , When the text overflows I want it to stay on the right side.Here is my code so far - https://jsfiddle.net/a49vuup1/
<div class="mainbox">
<span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
<div class="myhr"></div>
<span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>
</div>
and my css
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
}
hr {
border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
display: inline-block;
}
.myhr {
border-bottom: 1px solid #293A42;
}
.rightbox {
font-size: 16px;
min-width: 150px;
}

Answer 1

You could use display: table for this
example:
<div class="table">
<div class="table-row">
<div class="cell">
text 1
</div>
<div class="cell">
text 2
</div>
</div>
<div class="table-row">
<div class="cell">
text 3
</div>
<div class="cell">
text 4
</div>
</div>
</div>
css:
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid black;
}
https://jsfiddle.net/41vpjpuy/

Answer 2

I wasn't sure what the <hr> and .myhr was for so I guessed that it was to span both columns. I used display: table-cell for .leftbox and .rightbox and made the .mainbox display: table of course and added table-layout: fixed so your lengths can make more sense.
Reference
Fiddle
Snippet
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
display: table;
table-layout: fixed;
border-spacing: 3px;
border-collapse: separate;
}
hr {
border-top: 3px solid rgba(44, 44, 44, 1);
width: 200%;
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
display: table-cell;
}
.myhr {
border-bottom: 2px solid #000;
display: table-row;
width: 200%;
min-height: 30px;
padding: 5px;
}
.rightbox {
font-size: 16px;
min-width: 150px;
display: table-cell;
}
<div class="mainbox">
<span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
<div class="myhr">
<hr/>
</div>
<span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>
</div>

Answer 3

Additionally, try this also. I eddited your css and html
<div class="mainbox">
<div class="row">
<span class="leftbox">State</span>: <span class="rightbox">TAMILNADU TAMILNADUTAMILNADU TAMILNADU</span>
</div>
<div class="row">
<span class="leftbox">Phone</span>: <span class="rightbox">landline</span>
</div>
</div>
CSS:
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
display: table;
}
.row {
display:table-row;
}
{
border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
word-wrap: break-word;
display: table-cell;
width:25%;
}
.myhr
{
border-bottom: 1px solid #293A42;
}
.rightbox {
/* word-wrap: break-word; */
font-size: 16px;
min-width: 150px;
display:table-cell;
}