displaying form and title on same line

Question

I feel like Ive tried all the stack overflow solutions but none of them seem to work. I am trying to get the title and form to be on the same row. This is what it looks like right now.

This is what my HTML looks like

{% block blockbody %}
    <div class="mark">
        <div class="mark__svg">
            {% include '_svg/mark-gray.svg' %}
        </div>
    </div>
    <div class="bound bound--layout">
        <div class="container">
            <div class="content">
                <h1 class="block__title">{{ (block.title ?: post.title)|raw }}</h1>
                {{ filter_form }}
            </div>
        </div>
    </div>
{% endblock %}

{% block masthead %}
    {% set filter_form %}
        <form method="get" class= "filters" action="{{ post.link }}">
            <select name="practice-area" id="practice-area">
                {% for option in wp.get({post_type:'practice',orderby:'title',order:'ASC',posts_per_page:-1}) %}
                    {% set option = TimberPost(option) %}
                    
                    <option value="">Filter by Practice Area</option>
                {% endfor %}
            </select>
        </form>
    {% endset %}
    {% include '4_blocks/masthead-simple.twig' with {block: post.meta('masthead')[0], class:' block--masthead-tall'} %} 
{% endblock %}

This is what my css looks like

.block--masthead-simple {

    .content {
        .flexWidth(100%);
        align-self: flex-end;
        margin-right: 0;
    }

    .block__title {
        .headline;
        line-height: 1.354;
        margin-bottom: 0;
    }

    select#practice-area {
        float: right;
        display: flex;
        padding: 0 45px 0 15px;
        color:#333;
        height: 55px;
        border-radius: 0px;
        border: 20px;
        background-color: white;
    }
}

Ive tried

flex-direction: row;
vertical-align: top;
display: inline;

Answer 1

display: flex; is not working for you because it needs to be applied to the element that contains the page title and the form. So I've taken your HTML above, removed template tags from it, and added a <div> that contains both the title and the form. I've also commented out the SVG part as it's not clear where the SVG is supposed to be.

.content {
        align-self: flex-end;
        margin-right: 0;
    }

    .block__title {
        line-height: 1.354;
        margin-bottom: 0;
        margin-top: 0;
    }

    select#practice-area {
        float: right;
        display: flex;
        flex-direction: row;
        padding: 0 45px 0 15px;
        color:#333;
        height: 55px;
        border-radius: 0px;
        border: 20px;
        background-color: white;
    }
    
    .container {
      display: flex;
      flex-direction: row;
    }

<div class="container">
    <!-- <div class="mark">
        <div class="mark__svg">
            {% include '_svg/mark-gray.svg' %}
        </div>
    </div> -->
    <div class="bound bound--layout">
        <div class="container">
            <div class="content">
                <h1 class="block__title">{{ (block.title ?: post.title)|raw }}</h1>
                {{ filter_form }}
            </div>
        </div>
    </div>

        <form method="get" class= "filters" action="{{ post.link }}">
            <select name="practice-area" id="practice-area">
                    
                    <option value="">Filter by Practice Area</option>
            </select>
        </form>
</div>