How to style depending on the br and span tag hierarchy within a p

I have a span a br in the same position within a p. I want that if the br is before the span the span has a different styling, but if the span comes after the br the span has another styling.

p:first-child span {
  margin-top: 2px;
  color: green
}


p:first-child span + br {
  margin-top: 10px;
  color: red
}

p > br {
  display: none;
}

<div>
  <p>
    <br/>
    <span>Lorem</span>
  </p>
</div>

<div>
  <p>
    <span>Lorem</span>
    <br/>
  </p>
</div>

jsfiddle

The first Lorem is to be red and the second Lorem is to be green

It’s an array that contains different data and some have tags like this. So it’s not something I can just rip off

>Solution :

if br and span are the only elements then consider :last-child and :first-child

p span:first-child {
  margin-top: 2px;
  color: green
}

p span:last-child {
  margin-top: 10px;
  color: red
}

p > br {
  display: none;
}

<div>
  <p>
    <br>
    <span>Lorem</span>
  </p>
</div>

<div>
  <p>
    <span>Lorem</span>
    <br>
  </p>
</div>