.html

<div class="container">
  <div class="col1">
    col1
  </div>
  <div class="col2">
    col2
  </div>
</div>

위와 같은 HTML 마크업이 있다고 가정할 때, 아래와 같은 두가지 방법을 제안 드립니다.

Solution 1: Flexbox를 이용하는 방법

https://jsfiddle.net/qy3rmn9w/1/

.container {
  display: flex;
}

.col1 {
  flex-grow: 3;
  background-color: gray;
}

.col2 {
  flex-grow: 2;
  background-color: lightgray;
}

Solution 2: Table을 이용하는 방법

https://jsfiddle.net/4xa2o39q/

.container {
  display: table;
  width: 100%;
}

.col1 {
  display: table-cell;
  width: 60%;
  background-color: gray;
}

.col2 {
  display: table-cell;
  background-color: lightgray;
}

http://hashcode.co.kr/questions/1689

의 답변에 보시면 비슷하 코드가 있는데 참고가 되면 좋겠네요

다음과 같이 한번 css 로 해보시는건 어떨까요?

.table {
    position: relative;
    width: 100%;

    /* 다음은 편의상 잘보이게 하려고 추가 */
    height: 200px; 
}

.col1 {
    display: inline-block;
    width: 60%;

     /* 다음은 편의상 잘보이게 하려고 추가 */
    height: 100%; 
    background-color: yellow; /* 노란색 배경.*/
}

.col2 {
    display: inline-block;
    position: absolute;
    left: 60%;  /* 왼쪽 60% 에서 부터 */ 
    right: 0; /* 오른쪽 끝까지 */

     /* 다음은 편의상 잘보이게 하려고 추가 */
    height: 100%; 
    background-color: cyan; /* 노란색 배경.*/
}

그리고 HTML 은 다음과 같이 하면 될것 같습니다.

<div class="table">
    <div class="col1">왼쪽 60%</div>
    <div class="col2">나머지 오른쪽</div>
</div>

원하시는게 맞는지 모르겠네요.