Width - fifty per cent for table cell display breaks into seperate line <p>I am trying to display a panel that displays information in a tabular fashion as, <a href="https://i.stack.imgur.com/EFb8J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EFb8J.png" alt="enter image description here"></a></p> <p>My pluker code is <a href="https://plnkr.co/edit/I46WvANQpKuO2G2vT7JY?p=preview" rel="nofollow noreferrer">here</a>. Now, i use <code>display:table-row</code> to put <code>NAME</code> label and value <code>My Venue</code> in one place. When i give 50% width to the <code>table-cell</code> display, it breaks into next line as,</p> <p><a href="https://i.stack.imgur.com/iBFN9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iBFN9.png" alt="enter image description here"></a></p> <p>I am able to fix it by making the width as 49% for <code>table-cell</code> display. </p> <p>I am curious why does <code>50%</code> width break it into a different line, since <code>table</code> display doesn't have any margin.</p>