Я пытаюсь добавить кнопку удаления справа от панели bootstrap. Что бы я ни делал, это не соответствует заголовку панели. Помогите, пожалуйста.

<div class="panel-heading">
Update Article
<form class="delete_form pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
<input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
</form>
</div>
Редактировать 1: Добавлен остальной код панели.
<div class="panel-body">
<form class="article_form" id="article_form" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-6 form-group">
<label for="title" requiredField>Title*</label>
<input type="text" class="form-control" id="title" value="$title" name="title" maxlength="100" required>
</div>
<div class="col-sm-6 form-group">
<label for="pdf_link">PDF Link*</label>
<input type="text" class="form-control" id="pdf_link" value="$pdfurl" name="pdf_link" maxlength="100" required>
</div>
</div>
<div class="row">
<div class="word_file col-sm-6 form-group">
<label>Upload Microsoft Word file of the article.</label>
<input class="form-control" accept=".doc, .docx" type="file" id="word_file" name="word_file">
</div>
<div class="word_unavailable col-sm-6 form-group">
<label for="ur_name">Check if Microsoft Word file is unavailable.</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="chk_word" name="chk_word">
<label class="form-check-label" for="wordfiles">MS Word file is unavilable</label>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="Update" />
</form>
</div>
</div>
Я не использую любой пользовательский css.
Изменить 2: Необходимые результаты
