Aligning elements according to image - html

Question

could someone help me with an example how to accomplish following layout? Is tables the best for this?
https://gyazo.com/80a2f66d280c480c1e6e70637959b271
I do not want to hardcode the width of the elements because I need it to be responsive aswell, thats why I am having a hard time..
So basicly I need it centered but not text-align centered. Appreciate all the help I could get.

Answer 1

Don't use tables, this makes it hard to optimize the website for mobile devices. Here's what I would do:
body {
font-family: Arial, sans-serif;
color: #444444;
}
.info {
border: 1px solid #bbbbbb;
border-width: 1px 0;
padding: 10px;
}
.row {
line-height: 30px;
padding: 10px;
}
.label {
display: inline-block;
width: 30%; /* You may want to adjust this property */
margin: 0 10px;
text-align: right;
font-size: 95%;
color: #888888;
}
button {
border: none;
background-color: #43CEAD;
border-radius: 3px;
padding: 4px 10px;
color: white;
font-size: 90%;
}
.right {
float: right;
}
<div class="info">
<div class="row">
<span class="label">Name:</span>
John Doe
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Password:</span>
********
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Animus Heart ID:</span>
B0 23459332
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">E-mail:</span>
john#doe.com
<button class="right">Edit</button>
</div>
</div>

Answer 2

Why tables? You can set div width in percent, isn't it?
.col--first {
width: 40%;
float: left;
text-align: right;
}
.col--second {
margin-left: 1%;
width: 59%;
float: left;
}
.col--second:after {
content: '';
display: table;
clear: both;
}
.right {
float: right;
}
<div>
<div class="col--first">Name:</div>
<div class="col--second">John
<button class="right">Edit</button>
</div>
<div class="col--first">Password:</div>
<div class="col--second">******
<button class="right">Edit</button>
</div>
</div>

Answer 3

Have a look at responsive tables:
.table {
display: table;
}
.table > .row {
display: table-row;
}
.table > .row > .cell {
display: table-cell;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second
</div>
<div class="cell">
Third
</div>
</div>
</div>

Answer 4

#img {
width: 100%;
margin: 0 auto;
}
Width can be changed to reflect the desired size of the image, but this will center the image based on the parent element's size by dividing the two margins equally on the left and right.