Element 내부의 Element 정렬

나의 경우 A 태그 내부의 한 행에 Span 태그와 Button 태그가 존재하는데 

Span 태그가 좌측으로 붙어 있을 경우 Button 태그를 오른쪽 끝으로 붙이고 싶었다.

약간 시간이 걸려 찾게 되었고 이 방법이 정석인지는 모르겠으나 Button의 상위 태그에 Display 속성의 값을 'inline-block'으로 주고 정렬하고 싶은 Button 태그에 float 속성 값으로 'right'를 주니 해결되었다.

 

코드로 간략히 예시를 보여주자면

<a style={{ display : 'inline-block' }}>
    <span>블라블라</span>
    <button className='button' style={{ float : 'right' }}>
        블라블라
    </button>
</a>

 

와 같이 작성하니 처리 되었다.