how to style two spans that are vertically aligned and centered within a paragraph

Question

I am trying to create a "two-row" inline table within a paragraph. The js + class stack-block-br works, but I would like to know whether there's a better way.

Here are my attempts

var x = document.querySelector('.stack-block-br');
var s = document.querySelector('.stack-block-br > span');
var v = s.innerHTML.split('<br>');
var vlengths = v.map(x => x.length);
var iv = vlengths.indexOf(Math.max(...vlengths));
var vnewelement = document.createElement('span');
var h = s.offsetHeight;
vnewelement.innerHTML = v[iv];
var b = document.querySelector('body');
b.appendChild(vnewelement);
w = vnewelement.offsetWidth;
b.removeChild(vnewelement);
x.style.width = w + "px";
x.style.height = h + "px";

.stack {
  display         : inline-flex;
  flex-flow       : column;
  align-items     : center;
  justify-content : center;
}
.stack > * {
  width      : 100%;
  flex       : 1 100%;
  align-self : center;
}
.stack-block {
  display  : inline-block;
  position : relative;
}
.stack-block>span {
  float      : left;
  position   : absolute;
  text-align : center;
  }
.stack-block>span:first-child {
  top : -2em;
  }
.stack-block>span:last-child {
  top : -1em;
  }
.stack-block-br {
  display  : inline-block;
  position : relative;
  }
.stack-block-br>span {
  /*width    : 100%;*/
  float      : left;
  /*display  : inline-table;*/
  position   : absolute;
  text-align : center;
  bottom     : -0.2em;
  }

<p>
  class: stack
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack">
      <span>&larr;</span>
  <span>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

<p>
  class: stack-block
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack-block">
      <span>&larr;</span>
  <span>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

<p>
  class: stack-block-br
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack-block-br">
      <span>&larr;<br>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

The stack class "works" but the top span aligns with the text in the paragraph, and I cannot center the top span over the bottom.

The stack-block aligns the bottom with the p's text but it has no width.

With some javascript stack-block-br works. Note: I cannot use offsetWidth of the spans because the
returns a number much larger than the actual width.

Answer 1

I have settled upon a solution that uses a stack container: display: inline-block, a row container: display: table-row, and a cell container: display: table-cell

.stack-table {
    display: inline-block;
}
.stack-table > span {
    display: table-row;
    transform: translate(0, 25%);    
}    
.stack-table > span > span {
    display: table-cell;
    vertical-align: center;
    text-align: center;
    width: auto;
    height: auto;
    font-style: oblique 10deg;
}

  <p>
    class: stack-table
    <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph: 
    <span class="stack-table">
      <span><span>&larr;</span></span>
      <span><span>something</span></span>
    </span>
    the text that comes after the stack should follow the vertically aligned and centered text. 
  </p>

I decided to make the stack-table oblique to make it more noticeable. And I translated it a little (thanks @Anirudhsanthosh)