how to ignore br or line breaks in text with pure css truncate text button

I'm trying to implement a truncated text button in pure css. Unfortunately the "show more" button isn't ignoring the br tags or any other relevant html within the teaser and text body, and it's being pushed down, making too much white space below the teaser text. The "show more" button should be right next to the last word in the teaser text, and I would like to be able to create line breaks without it affecting the show more button. Here's my attempt:

http://ift.tt/1Zprdt6

html:

<div>

  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">Clifton Benevento is pleased to present “Thinking Creatively With Pictures”, a solo exhibition of paintings and a video by New York based artist Sofia Leiby.

    <br />

    <br />

    <span class="read-more-target">Leiby’s research in graphology led her to the field of psychometrics..  <br /> <br />

Leiby has indexed the graphic “stimuli” from The Wartegg Test..<br /> <br />

     

Upon meeting artists Wassily Kandinsky and Paul Klee in the 1920s, Wartegg took inspiration from .. </span></p>

  <label for="post-1" class="read-more-trigger"></label>

</div>

<img src="http://ift.tt/28dLV55" width="400px">

css:

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  /* max-height: 999em;*/
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  /*padding: 0 .5em;*/
  color: black;
  font-size: .7em;
  line-height: 1;
  border: 0px solid #ddd;
  br {
    display: none;
  }
}