Placing two words in the middle of two other words

[asasass]

Like this:

This is what I have: https://jsfiddle.net/npk902jz/

#holder {
  width: 780px;
  height: 600px;
  background: #000000;
  position: relative;
}

.hvcentered {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 430px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: white;
}

.text {
  font-family: Times New Roman;
  font-size: 100px;
  text-align: center;
  color: red;
  margin-bottom: -30px;
}

.blue {
  color: blue;
}

.orange {
  color: #b45f06;
}

.teal {
  color: teal;
}

.black {
  color: black;
}

p {
  margin: 5px;
}

<div id="holder">
  <div class="hvcentered">

    <p class="text"><span class=" blue">text</span> <span class=" teal">text</span> <span class=" orange">text</span> <span class=" black">text</span> </p>

  </div>
</div>

[veocode]

Like this?

[PaulOB]

In your code you could do this (but the code from @veocode is better.):

#holder {
  width: 780px;
  height: 600px;
  background: #000000;
  position: relative;
}

.hvcentered {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 430px;
  margin: auto;
  background: white;
}

.text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Times New Roman;
  font-size: 100px;
  text-align: center;
  color: red;
}
.double span{display:block;}

.blue {
  color: blue;
}

.orange {
  color: #b45f06;
}

.teal {
  color: teal;
}

.black {
  color: black;
}

p {
  margin: 5px;
}

<div id="holder">
  <div class="hvcentered">

    <p class="text"><span class=" blue">text</span> <span class="double"><span class=" teal">text</span><span class=" orange">text</span></span> <span class=" black">text</span> </p>

  </div>
</div>