Building on the CSS from Cerbrus' answer, the JavaScript below will toggle the answer you are composing between being side-by-side with the question and its normal location. This addresses the issue raised by Turnip that the answer you are entering is normally at the end of the list of answers by moving the answer entry <form>
to the beginning of the answer section. You can choose if you want the sidebar shown (Related, Linked, Hot Network Questions, etc.) by changing the value of hideSidebar
.
As a bookmarklet in action:

(function(){
var hideSidebar=true; //Change to false if you don't want to hide the right sidebar.
//CSS code from Cerbrus' answer wrapped in a <style>, plus optionally hiding the sidebar:
var newStyleHTML = '<style id="questionAnswerSideBySideCSS" type="text/css">#content {width: 100%;} #mainbar {width: 1456px; display: inline-block; float: none; vertical-align: top; }' + (hideSidebar?'#sidebar { display: none; } #feed-link { display: none; }':'#sidebar { display: inline-block; float: none; vertical-align: top; }') + ' #question { display: inline-block; vertical-align: top; } #answers { display: inline-block; position: relative; top: -30px; vertical-align: top; } #answers-header { display: none; }</style>';
var newStyle = document.getElementById('questionAnswerSideBySideCSS');
var answerForm = document.getElementById('post-form');
var answers = document.getElementById('answers');
if(newStyle){
newStyle.parentNode.removeChild(newStyle);
answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice'));
}else{
document.head.insertAdjacentHTML('beforeend',newStyleHTML);
answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling);
}
})()
If you want to always have the two column format, you can just install the above code as a user script.
As a bookmarklet:
javascript:void(function(){var hideSidebar=true;var newStyleHTML = '<style id="questionAnswerSideBySideCSS" type="text/css">#content {width: 100%;} #mainbar {width: 1456px; display: inline-block; float: none; vertical-align: top; }' + (hideSidebar?'#sidebar { display: none; } #feed-link { display: none; }':'#sidebar { display: inline-block; float: none; vertical-align: top; }') + ' #question { display: inline-block; vertical-align: top; } #answers { display: inline-block; position: relative; top: -30px; vertical-align: top; } #answers-header { display: none; }</style>'; var newStyle = document.getElementById('questionAnswerSideBySideCSS'); var answerForm = document.getElementById('post-form'); var answers = document.getElementById('answers'); if(newStyle){ newStyle.parentNode.removeChild(newStyle); answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice')); }else{ document.head.insertAdjacentHTML('beforeend',newStyleHTML); answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling); } })()
Just moving the answer to the beginning of the Answers section
As I was about to post this, I realized that I wanted the functionality of just being able to toggle the answer entry <form>
to the beginning of the Answers section and back to its normal location without adding the two column format CSS. This will allow keeping the standard single column format, but move the answer you are working on will be right under the question. This should be handy for referring to the question while composing your answer when there are multiple answers, but you don't want a two column format.
(function(){
//Just an empty <style>:
var newStyleHTML = '<style id="questionAnswerSideBySideCSS" type="text/css"></style>';
var newStyle = document.getElementById('questionAnswerSideBySideCSS');
var answerForm = document.getElementById('post-form');
var answers = document.getElementById('answers');
if(newStyle){
newStyle.parentNode.removeChild(newStyle);
answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice'));
}else{
document.head.insertAdjacentHTML('beforeend',newStyleHTML);
answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling);
}
})()
As a bookmarklet:
javascript:void(function(){var newStyleHTML= '<style id="questionAnswerSideBySideCSS" type="text/css"></style>'; var newStyle = document.getElementById('questionAnswerSideBySideCSS'); var answerForm = document.getElementById('post-form'); var answers = document.getElementById('answers'); if(newStyle){ newStyle.parentNode.removeChild(newStyle); answers.insertBefore(answerForm,document.querySelector('h2.bottom-notice')); }else{ document.head.insertAdjacentHTML('beforeend',newStyleHTML); answers.insertBefore(answerForm,document.getElementById('answers-header').nextSibling); } })()