I currently have a Angular search function implemented [here](https://stackblitz.com/edit/angular-course-filter-pipe-mbb53i?file=src%2Fapp%2Fread-more.component.ts) that allows a user to search for courses.

This utilizes a [read-more directive](https://stackoverflow.com/a/39859181/6521206) that shows a preview of the description and keywords and allows users to toggle to see more of the text. I converted the `see more` hyperlink to a button, and either way the button or the text appear below the course description / keywords and I would like for this toggle to show up next to the words instead of on its own line. 

```
<div [innerHTML]="currentText"> </div>
<button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button>

```

I've tried solutions such as [wrapping them in divs and using `display:inline`](https://stackoverflow.com/a/10451583/6521206) 

```
<div id="block_container">
    <div id="bloc1"> <div [innerHTML]="currentText"> </div> </div>
    <div id="bloc2">
     <button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button> </div>
</div> 

```

and have tried [`display: inline-block`](https://stackoverflow.com/questions/38889121/give-button-and-text-on-the-same-line-and-text-to-be-center-of-button), among others, but can't figure it out. 

Is there an issue with it being inside a table cell or part of an Angular template? Any pointers would be appreciated! Thanks!