Не прямоугольная поисковая форма
 

Доброго времени суток, форумчане, подскажите пожалуйста как сделать форму поиска не прямоугольной формы, сделал форму, не пойму теперь как на ней разместить элементы https://jsfiddle.net/xwLex43a/1/

Нужно что то подобное:

Модератор, как здесь картинки вставлять?

До нажатия на расширенный поиск:https://cloud.mail.ru/public/2Qij/4BDWXNRqo
После нажатия на расширенный поиск:
https://cloud.mail.ru/public/EcYJ/zB8Srqi1T

Метод который открывает или закрывает расширенный поиск:

$(function () {
            $('#ExtSearch').click(function () {
                $('#searchFormFilters').slideToggle();
                if ($('#ExtSearchOpen').is(':visible')) {
                    $('#ExtSearchOpen').hide();
                    $('#ExtSearchClose').show();
                }
                else {
                    $('#ExtSearchOpen').show();
                    $('#ExtSearchClose').hide();
                }
            });
        });

Т.е. мне нужно просто расположить ссылку "Расширенный поиск" на нижнем выступающем "корешке" формы, как это сделать?

Вот код формы:

<form id="SearchForm" style="width: 99.3%;">
        <div style="background-color: #f5f5f5;" class="k-block">
            <div style="margin-left: 10px;margin-top: 10px;margin-bottom: 10px;">
                <div>
                    <input type="text" id="client" class="k-textbox" autocomplete="off" data-field="client-input" style="height: 33px;" placeholder="Введите ФИО или номер клиента..." />
                    <input type="text" id="userId" name="userId" value="@(UserAccessor.GetInternalIdentity()?.Id != null ? UserAccessor.GetInternalIdentity()?.Id : 0)" style="display: none;" />
                              <button id="SearchForm-reset" type="reset" title="Очистить форму"><span class="k-icon k-i-close"></span></button>
                        </div>
                       
                        <div id="searchFormFilters" style="display: none">
                            <div class="drop">
                                <label for="executor">Принял:</label>
                                <input type="text" id="executor" data-role="dropdownlist" data-option-label="Выберите специалиста..."
                                       data-value-field="id"
                                       data-text-field="title"
                                       data-bind="value: SelectedExecutorId,
                                           source: executor,
                                           enabled: executor.enabled"
                                       name="executor"
                                       style="width:300px" />
                            </div>
                            <div class="drop">
                                <label for="recommender">Рекомендовал:</label>
                                <input type="text" id="recommender" data-role="dropdownlist" data-option-label="Выберите специалиста..."
                                       data-value-field="id"
                                       data-text-field="title"
                                       data-bind="value: SelectedRecommenderId,
                                           source: recommender,
                                           enabled: recommender.enabled"
                                       name="recommender"
                                       style="width:300px" />
                            </div>
                            <div class="drop">
                                <label for="StartDate">С:</label>
                                <input name="StartDate" data-role="datepicker" id="StartDate" placeholder="Выберите дату..."
                                       style="width:100%;"
                                       data-bind="value: StartDate" />
                            </div>
                            <div class="drop">
                                <label for="EndDate">До:</label>
                                <input name="EndDate" data-role="datepicker" id="EndDate" placeholder="Выберите дату..."
                                       style="width:100%;"
                                       data-bind="value: EndDate" />
                            </div>
                        </div>
                       </div>
                    <div id="ExtSearch" class="expand-button-content" style="width:150px;margin-left: 10px;">
                        <a id="ExtSearchOpen" href="javascript:void(0)" style="">Расширенный поиск</a>
                        <a id="ExtSearchClose" href="javascript:void(0)" style="display:none;">Скрыть поля поиска</a>
                    </div>
                </div>
    </form>

Сделал так: https://jsfiddle.net/0yhx0knq/
но почему то текст не влазиет в Div

следующий вариант https://jsfiddle.net/0yhx0knq/2/ из трёх элементов