Two child divs one match another with variable width

Question

I have 2 child divs within a parent div. I need child1 to be always centered in the parent, and child2 to be positioned under child1 (being aligned to left side of child1).

Child1 contains variable length of text. How can this be done?

#parent {
  text-align: center;
}

<div id="parent">
  <div id="child1">Variable length text here</div>
  <div id="child2">Some text here</div>
</div>

Current child2 position

This is what I need

Answer 1

Try the display:table and display:table-caption approach:

.parent {
  display: table;
  margin: auto;
}

.child2 {
  display: table-caption;
  caption-side: bottom;
  background: silver;
}

<div class="parent">
  <div class="child1">Variable length text here</div>
  <div class="child2">Some text here</div>
</div>

<br>

<div class="parent">
  <div class="child1">Variable length text</div>
  <div class="child2">Some text Some text Some text</div>
</div>