ACLU - highlight words inline, with line breaks

by lasha

HTML

<a href="" class="add-paragraph">Add Comparison Paragraph</a>

<p class="fancy">
<span class="instance-1">
    In <span class="highlight fixed">
    <span class="selected">2010</span>
    <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
        </span>
    </span>, <span class="green">784,021</span> people
    <br>of <span class="highlight fixed"><span class="selected">black and white</span>
        
        <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
            <span>contentttttttt</span><br>
            <span>content4</span><br>
            <span>content5</span><br>
            <span>content6</span><br>
            <span>content7</span><br>
            <span>content8</span><br>
        </span>
        
            </span> ethnicity in <span class="highlight fixed"><span class="selected">the United States</span>
        
        <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
            <span>content3</span><br>
            <span>the United States</span><br>
            <span>content6</span><br>
            <span>content7</span><br>
            <span>content8</span><br>
        </span>
        
            </span> were arrested for marijuana possession; A <span class="highlight fixed"><span class="selected">black person</span>
            <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
        </span>
                
                </span> was <span class="green">3.73</span> times more likely<br> to be arrested than a<br> <span class="highlight fixed"><span class="selected">white person</span>
            <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
        </span>

        </span>.
</span>
</p>

CSS

body {
    font-family: helvetica;
}
p {
    position: relative;
    /* width: 545px; */
    width: 555px;
    line-height: 1.3;
    font-size: 40px;
    font-weight: 600;
}
.green {
    color: #55dd55;
}
.highlight {
    background-color: #000;
    color: #000;
    //display: inline-block;
    /* padding: 0 6px; */
    padding: 0 11px;
    font-weight: 100;
    -webkit-transition: color 2s ease-in-out;
}
.highlight.reveal {
    color: #fff;
}
.highlight.inline-block {
    display: inline-block;
    /* line-height: 37px; */
}
.dropdown-container {
    position: absolute;
    /* padding: 0 10px 5px 6px; */
    padding: 0 11px 5px 11px;
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    background-color: #000;
}

.dropdown-container.expanded {
    visibility: visible;
    opacity: 1;
}

JavaScript

$(function () {
    var triggered = false;
    var instanceCounter = 1;

    function eventListeners(){   
        $(".fixed").each(function (i, el) {
            var $this = $(this);
            var $dropdownContainer = $this.find(".dropdown-container");
    
            // Add &nbsp; to beginning and end of box
            // $this.find(".selected").html("&nbsp;" + $this.find(".selected").html() + "&nbsp;");
            
            //$this.addClass('inline-block');
            if(!triggered){
                $this.addClass('inline-block').css({
                    width: $this.width(),
                    height: $this.height() - 6,
                    "line-height": $this.height() - 6 + "px"
                });
            } else {
                $this.addClass('inline-block').css({
                    width: $this.width(),
                });   
            }
            
            var widestWidth = 0;
            var currentWidth = 0;
            $this.find(".dropdown-container").find("span").each(function(){
                var $this = $(this);
                // console.log($this.css('color','red').width());
                //console.log($this.outerWidth());
                
                currentWidth = $this.outerWidth();
                if(currentWidth > widestWidth){
                    widestWidth = currentWidth;
                }
                //console.log("looped");
            });
            
            // Take the "widestWidth" of the current select menu's dropdown items, and apply it to container
            // console.log(widestWidth);
            // $this.width(widestWidth);
    
            $this.on("click", function (i, e) {
                var $this = $(this),
                    offset = $this.position();
                
                console.log("clicked");
    
                $dropdownContainer.css({
                    top: offset.top + $this.height(),
                    left: offset.left
               ...