Html table like structure without table

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>