Text wrapping around icon with spans inside of h3 tag

Question

I am trying to get my text to align so that the text does not wrap around this icon. I am having trouble because my icon and my text are inside of an h3 tag and an anchor and I am using spans. The typical ways for that I would usually make this work will not work because I am using spans and because both the icons and the text are inside of h3 and anchors.

What I am looking for is

icon Test test test test test test
     Test test test test test test

What I am getting is

icon Test test test test test test
Test test Test test test test test

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  min-height: 0;
  font-size: 100%;
}

.fa-plus::before {
  content: "\f067";
}

.textalignleft {
  overflow: hidden;
  text-align: right;
}

<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0">
  <a href="javascript:void(0)">
    <span class="fa fa-plus fc-iconspace"></span>
  
  <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></a></h3>

JSFiddle

Answer 1

You can set the display of the anchor and span to table-cell:

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  min-height: 0;
  font-size: 100%;
}

.fa-plus::before {
  content: "\f067";
}

a,
.textalignleft {
  display: table-cell;
}

<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0">
  <a href="javascript:void(0)">
    <span class="fa fa-plus fc-iconspace"></span>
  </a>
  <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></h3>

Answer 2

The easiest solution is to apply display: flex; to h3 > a and erase the text-align: right from .textalignleft. That will create two blocks of equal height inside the a inside the h3:

Edited snippet after comment and changed question:

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  min-height: 0;
  font-size: 100%;
}

.fa-plus::before {
  content: "\f067";
}

.textalignleft {
  overflow: hidden;
  text-align: left;
  padding-left: 5px;
}
h3 > a {
  display: flex;
}

<h3 class="fc-panel-title ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-17" aria-controls="ui-id-18" aria-selected="false" aria-expanded="false" tabindex="0">
  <a href="javascript:void(0)">
    <span class="fa fa-plus fc-iconspace"></span>
  
  <span class="textalignleft">Does American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?American AgCredit offer special programs for young, beginning, or small farmers/ranchers?</span></a></h3>