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> 

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;
}